I have a problem with accented letter from Google fonts. Letter "š" shows correctly in all browsers on my PC but it's replaced with system font in all mobile browsers, Android and iOS (it works fine in Android Chrome, though). Font is Abril Fatface and you can see result here Screenshot
And here https://jsfiddle.net/Lauven/zkL04kbx/embedded/result/
It acts the same on my server and on Jsfiddle.
So far I've tried these things:
- Put
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"> and <meta charset="UTF-8"> in head section
- Added utf-8 encoding to .htaccess file
- Saved file with utf-8 encoding in my text editor
But I'm not sure it's the problem with encoding anymore since letter displays correctly in browsers on my PC and Android Chrome. Anybody have any idea how to solve this?
Update: It actually works only in Chrome/Windows and Chrome/Android
I had the exactly same problem, with letters correctly being rendered in Chrome but being replaced in Firefox.
The solution in my case was that I have forgotten to include Latin extended option when downloading the font from Google Fonts.
In your case when downloading the font from https://www.google.com/fonts#UsePlace:use/Collection:Abril+Fatface in the section 2. Choose the character sets you want: make sure you have included Latin Extended (latin-ext) option.
That font does not support the character(s) you're trying to use with it. Have a look at http://jsbin.com/zucatufaxi/edit?html,css,output: the final š is styled nothing like the rest of the text.
So the real solution here is going to be "make sure the font you're using supports the text you need to style", or see if it supports combining characters and use the unicode sequence s + combining caron: š.
Although a quck test in the above bin shows that this sequence is not properly supported by the font, so: you'll either need to find a font with full support, or find a font that looks similar enough as fallthrough font (the first usually makes more sense).
UPDATE: I tried to use the same font hosted on my server instead of using Google fonts and since then everything works fine across all browsers. I still have no idea what was the problem with Google fonts though. But at least it works this way.
