Unable to load fonts using @font-face

Question

I am trying to add 'MyriadPro' font using the @font-face. Here's the fiddle

HTML code:

<h1> Test Heading </h1>

CSS Code:

@font-face {
font-family: 'MyriadPro Regular';
  src: url('http://consumemarketing.com/thai-works/MyriadPro-Regular.woff') format('woff'),    /* FF 3.6, Chrome 5, IE9 */
        url('http://consumemarketing.com/thai-works/MyriadPro-Regular.ttf') format('truetype'), /* Opera, Safari */
        url('http://consumemarketing.com/thai-works/MyriadPro-Regular.svg#font') format('svg'); /* iOS */
}
h1{
  font-family: 'MyriadPro Regular', sans-serif;  
}

I've tried to test this locally, doesn't work, not sure what's missing.

Are you the owner of that domain? If not, they may have disabled hotlinking (something you shouldn't do anyway). — Tieson T., Aug 18 '16 at 06:13

score 1 · Accepted Answer · 2016-08-18T06:15:59.073

1

You spelled MyriadPro as MyriaedPro

h1{
  font-family: 'MyriadPro Regular', sans-serif;  
}

Edited

This is the error being displayed in the console.

Font from origin 'http://consumemarketing.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

and this is the error being displayed in your fiddle.

Mixed Content: The page at 'https://jsfiddle.net/krish7878/27tp756L/' was loaded over HTTPS, but requested an insecure font 'http://consumemarketing.com/thai-works/MyriadPro-Regular.woff'. This request has been blocked; the content must be served over HTTPS.

You are trying to load the fonts locally, which is not allowed as the requested resource doesn't have a header and in your JSFiddle, it doesn't allow the font to load as it is from an insecure origin (http). So instead download the fonts locally and try using them, which works surely.

edited Aug 18 '16 at 06:15

answered Aug 18 '16 at 06:04

Thank you for the correction but even witht correction it does not work. – chandan Aug 18 '16 at 06:06
Thank you for the edit, In the setup I use I will need to load files form an other domain :( – chandan Aug 18 '16 at 06:19
@chandan Is your code gonna be used with https or http? – Aug 18 '16 at 06:21
@Malik Cheripally: http – chandan Aug 18 '16 at 06:23
1

Then it won't be a problem. Your font will be loaded when you run your page from a server, instead of running it as a local file. In case you want to load font from a https origin, Droid Sans is a close alternative for Myriad Pro, which can be accessed safely as https request from [Droid Sans Link](https://fonts.google.com/specimen/Droid+Sans?query=Droid) – Aug 18 '16 at 06:28

score 1 · Answer 2 · edited May 23 '17 at 11:44

The website that you are trying to load the font(s) from is blocking the loading of the fonts onto your page as web fonts are subject to Cross-Origin Resource Sharing (CORS). CORS is basically a way for a remote host to control access to certain types of resources, so without the owner of the server that you are trying to access the fonts from modifying their .htaccess file to include the header to allow the CORS, you are unable to utilize these fonts from that server.
More info on CORS can be found here if you want to learn some more.

The simplest thing to do would be to download the fonts you have specified by placing the URL you used in the @font-face property in your browser and then putting them in the folder where your site's folder, and modifying the @font-face URL's to direct to your local folder.
For example if you were to download the fonts to your site's folder in a subfolder called /fonts, you would modify the @font-face src to the following:

@font-face {
    font-family: 'MyriadPro Regular';
    src: url('fonts/MyriadPro-Regular.woff') format('woff'),    /* FF 3.6, Chrome 5, IE9 */
    url('fonts/MyriadPro-Regular.ttf') format('truetype'), /* Opera, Safari */
    url('fonts/MyriadPro-Regular.svg#font') format('svg'); /* iOS */
}

Apart from avoiding your issue, the other thing is that by storing the files locally, it greatly reduces the loading time for the user as it is not relying on the external server to provide the files.
Hope this clears everything up.

Unable to load fonts using @font-face

2 Answers2