Google Fonts, CSS, Latin Question

Question

I'm trying to use this font on my web.

It's in Lithuanian language, but it's not the point, the point is, that on google fonts previewer I can see characters beautifully, but on my site some specific symbols gets some nasty look.

Maybe anyone knows how can I solve this, I say, issue?

P.S. Or recommend me some other standard very light font which I could use ...

Answer 1

Those glyphs are not in the font. The standard fallback font of serif should be making it obvious; here’s what I see (using a pangram from Wikipedia):

If you download the font and look inside (using Font Book on Mac, or something like FontForge), you can see which glyphs are present or absent. To fix this, I would enter the characters you need into the previewer.

A quick selection of sans-serif fonts which contain the glyphs you need:

• Museo Sans whose 500 weight may be used freely online.
• Aller, which may require a license.
• DejaVu Sans and Droid Sans, which many users will have installed.
• Helvetica, Geneva, and FreeSans.
• Trebuchet MS, Verdana, Calibri, Candara, and Arial, which almost all users will have installed.

Calibri appears to be a decent match for Lato, so you might use font-family: Calibri, sans-serif; (without embedding anything at all).

Answer 2

I had the same problem with 'Open Sans' font, and spent 3 hours trying to fix this, until I discovered the solution.

Try specifying the subset that matches the glyphs for your language, like in my case:

from this

<link href='//fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>

to

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

See if that fixes your problem. Obviously make sure you check if the font used supports extra subsets. Don't forget they also support Cyrillic and Cyrillic Extended.

Cheers, Michael.