Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Google Fonts cannot be displayed with Firefox and Internet Explorer

Posted on 2015-01-09
6
Medium Priority
?
508 Views
Last Modified: 2016-05-12
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
0
Comment
Question by:sbayrak
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 
LVL 36

Expert Comment

by:Kimputer
ID: 40540144
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.
0
 
LVL 1

Author Comment

by:sbayrak
ID: 40540553
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
0
 
LVL 36

Expert Comment

by:Kimputer
ID: 40540658
WOFF2 files are probably not supported yet on Firefox. Try to use WOFF1 files only and the error will probably disappear.
0
 
LVL 1

Author Comment

by:sbayrak
ID: 40540841
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?
0
 
LVL 36

Accepted Solution

by:
Kimputer earned 2000 total points
ID: 40541388
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)

Obviously, you forgot some code referencing google again (instead of hosting the file locally. Just search in your code for this mistake and fix it.

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.

Just because it's not there, doesn't mean it won't display correctly. I guess you didn't even try. Because it's not there, Google gave you only one file, because that file contains all the characters.

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.

That's because Google knows Chrome can use subsets, and it knows it supports WOFF2.

So the first answer still stands, fix all external links, have all files local. Using only 2 WOFF files is enough (you don't need Google's super deluxe solution, just copy only the 2 WOFF (400 and 700) files you got from Firefox.
0

Featured Post

Tech or Treat!

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Ever visit a website where you spotted a really cool looking Font, yet couldn't figure out which font family it belonged to, or how to get a copy of it for your own use? This article explains the process of doing exactly that, as well as showing how…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

609 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question