@font-face stopped working

Question

Not sure why but @font-face has stopped working on a number of my sites (Blogger & Wordpress). I previously used Google Drive to host the fonts as below:

@font-face {font-family: 'Biloxi';
src: url('https://googledrive.com/host/0Bybz--lLp5SvZmc0SGRGOVB4dEE/Biloxi Script-webfont.eot');
src: url('https://googledrive.com/host/0Bybz--lLp5SvZmc0SGRGOVB4dEE/Biloxi Script-webfont.eot') format('embedded-opentype'),
 url('https://googledrive.com/host/0Bybz--lLp5SvZmc0SGRGOVB4dEE/Biloxi Script-webfont.woff') format('woff'),
 url('https://googledrive.com/host/0Bybz--lLp5SvZmc0SGRGOVB4dEE/Biloxi Script-webfont.ttf') format('truetype'),
 url('https://googledrive.com/host/0Bybz--lLp5SvZmc0SGRGOVB4dEE/Biloxi Script-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;}

When it stopped working, I tried hosting the fonts on my server and linking to the fonts in a file as below but even this didn't load the fonts which I found strange.

@font-face {
font-family: 'Shorelines Script';
src: url('ShorelinesScriptBold.eot');
src: url('ShorelinesScriptBold.eot?#iefix') format('embedded-opentype'),
    url('ShorelinesScriptBold.woff') format('woff'),
    url('ShorelinesScriptBold.ttf') format('truetype');
font-weight: normal;
font-style: normal;

}

It seems sporadic so the font will load one minute, but then you refresh and it won't load (e.g. http://hummingbirdgattodesign.blogspot.co.uk/). The problem has been on Blogger and Wordpress and seems to be on Chrome and Firefox.

As a relatively inexperienced coder any help is greatly appreciated!

step 1: remove all these font formats that are no longer supported. Use `woff`/`woff2` for modern browsers, and `eot` *only* if you need IE8 or earlier support (which you shouldn't, given that Microsoft finally dropped IE8 and below almost a year ago). Everything else is either a dead format (like `.svg`) or redudant (like `ttf`/`otf`, which are wrapped by woff byte-for-byte already, and there are no browsers that properly support ttf/otf but not woff) — Mike 'Pomax' Kamermans, Sep 28 '16 at 00:03

score 0 · Accepted Answer · edited May 23 '17 at 11:48

It looks like the browser is blocking the request for the web font files because they aren't being sent with an Access-Control-Allow-Origin header set. Have a look at the Console in the developer tools in Chrome/Firefox and you will see the errors:

Font from origin 'https://googledrive.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 'http://hummingbirdgattodesign.blogspot.co.uk' is therefore not allowed access. The response had HTTP status code 502.

I'd suggest you look for an alternative place to host the font files, as I don't think Google Drive will set this header for you (eg: Access-Control-Allow-Origin error on Google Drive web site). You'd have more control over this kind of thing by serving from Amazon AWS, or the Google Cloud platform.

Thank you so much for this, however I've already tried hosting the fonts on my domain (e.g the title font here: http://halfmoongatto.blogspot.co.uk/) and it seems to be pulling the same error message. Is there any way around this? — gattocat, Sep 27 '16 at 12:30
It looks like the same thing is happening there. Do you have control over your web server? If so you can configure it to send the appropriate header: http://enable-cors.org/server.html — bbodien, Sep 27 '16 at 12:33

@font-face stopped working

1 Answers1