webfont not working in Firefox

Julie Russo
asked 10 years ago

In Chrome, the fonts look perfect. In the latest Firefox (30.0), everything that should be Roboto is showing up as the browser default font. Weirdly, Roboto Slab is working in headers. What is up with Firefox?

1 Answers

DominicStaff
answered 10 years ago

To resolve this issue, you can add the following code to the .htaccess
Code:

<FilesMatch "\.(ttf|otf)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

Hope this helps !

Julie Russo
replied 10 years ago

Thanks for this tip! So this really should work, but it isn’t? At least, I tried to get Firefox to hard refresh the page.

I am looking at headers in Firebug, these fonts are not loading:

And I get this error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://themes.googleusercontent.com/static/fonts/roboto/v9/W5F8_SL0XFawnjxHGsZjJA.ttf. This can be fixed by moving the resource to the same domain or enabling CORS.

These fonts are loading properly:

https://themes.googleusercontent.com/static/fonts/roboto/v11/CrYjSnGjrRCn0pd9VQsnFOvvDin1pK8aKteLpeZ5c0A.woff

https://themes.googleusercontent.com/static/fonts/roboto/v11/RxZJdnzeo3R5zSexge8UUbO3LdcAZYWl9Si6vvxL-qU.woff

https://themes.googleusercontent.com/static/fonts/roboto/v11/1pO9eUAp8pSF8VnRTP3xnnYhjbSpvc47ee6xR_80Hnw.woff

This is Firebug’s record of the response:

@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 400;
src: local(‘Roboto Regular’), local(‘Roboto-Regular’), url(https://themes.googleusercontent.com/static/fonts/roboto/v11/CrYjSnGjrRCn0pd9VQsnFOvvDin1pK8aKteLpeZ5c0A.woff) format(‘woff’);
}
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 500;
src: local(‘Roboto Medium’), local(‘Roboto-Medium’), url(https://themes.googleusercontent.com/static/fonts/roboto/v11/RxZJdnzeo3R5zSexge8UUbO3LdcAZYWl9Si6vvxL-qU.woff) format(‘woff’);
}
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 700;
src: local(‘Roboto Bold’), local(‘Roboto-Bold’), url(https://themes.googleusercontent.com/static/fonts/roboto/v11/d-6IYplOFocCacKzxwXSOLO3LdcAZYWl9Si6vvxL-qU.woff) format(‘woff’);
}
@font-face {
font-family: ‘Roboto’;
font-style: italic;
font-weight: 400;
src: local(‘Roboto Italic’), local(‘Roboto-Italic’), url(https://themes.googleusercontent.com/static/fonts/roboto/v11/1pO9eUAp8pSF8VnRTP3xnnYhjbSpvc47ee6xR_80Hnw.woff) format(‘woff’);
}

In fact, Roboto Slab and Roboto header and italic versions are working – only normal isn’t loading. It seems random!

I suppose I could upload the fonts to my server and see if that helps.

Julie Russo
replied 10 years ago

Aha, I have cracked at least part of it. The problem seems to originate (for whatever reason) in the style code that comes from the fonts in the customizer. I disabled the fonts parts of the customizer (in customizer.php and extras.php) – since I am perfectly happy to tweak CSS in the WordPress editor – and all is well!