Letter With Accent Not Displayed Correctly In Mobile Browsers

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

Solution 1:

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.

Solution 2:

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).

Solution 3:

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.