asked on

Google Fonts cannot be displayed with Firefox and Internet Explorer

Hi,

We configured our website with 'Opensans' Google Font.
Chrome displays it without any problem but other browsers cannot.
We added the below header directive into our .htaccess file appropriately;

  <IfModule mod_headers.c>

     # CORS for Google fonts
     Header set Access-Control-Allow-Origin "*"

  </IfModule>

Open in new window

But it did't fix the issue, even we get correct response when we check our site by using curl -I command from a remote location;

Access-Control-Allow-Origin: *

Open in new window

We cleared the cache at both server-side and browser, nothing changed.

Firefox still complains about it with this message inside Developer > Web console;

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://fonts.gstatic.com/s/opensans/v10/u-WUoqrET9fUeobQW7jkRT8E0i7KZn-EPnyo3HZu7kw.woff. This can be fixed by moving the resource to the same domain or enabling CORS.

Regards

Kimputer

What is the problem with actually doing what it says? Copying the woff file takes seconds, so does adjusting the url link in your css file.
That way there won't be any trust issues and all supported browsers won't complain.

sbayrak

ASKER

I tried it but I got this error messages from Firefox;

downloadable font: invalid version tag (font-family: "Open Sans" style:normal weight:normal stretch:normal src index:2)
source: http://our.examplesite.com/fonts/OpenSans/OpenSans_400_latin-ext.woff2 custom.css

downloadable font: rejected by sanitizer (font-family: "Open Sans" style:normal weight:normal stretch:normal src index:2)
source: http://our.examplesite.com/fonts/OpenSans/OpenSans_400_latin-ext.woff2 custom.css

Kimputer

WOFF2 files are probably not supported yet on Firefox. Try to use WOFF1 files only and the error will probably disappear.

sbayrak

ASKER

When I change to WOFF only, console errors have gone but Firefox or any other browser still cannot display the font.
Instead Firefox Font Inspector says Open Sans remote "http://fonts.gstatic.com/s/opensans/v10/u-WUoqrET9fUeobQW7jkRT8E0i7KZn-EPnyo3HZu7kw.woff" (all types of cache cleared on server and browser)

By the way, I noticed that when you access http://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin,latin-ext URL through your browser in order to get the CSS codes and relevant font (.woff) links, Google returns different codes for dfferent browsers.
For example you only get two @font-face definitions (400 and 700) via Firefox and there're no "latin-ext" between them, which is not ok for us. Our site has contents in Turkish language also.
When you access the same link with Chrome, you can get at least four @font-face definitions (400 latin, 400 latin-ext, 700 latin, 700 latin-ext) with WOFF2.
So I think it will not solve the issue with WOFF as expected, if we could make it work locally?

ASKER CERTIFIED SOLUTION

Kimputer

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial