Font is missing glyphs for specific language - how can I utilize css fallback in this case?

Question

I'm using Myriad Pro, and for Georgian language it shows [X][X][X] blocks.

I want to use Myriad Pro for English language, but how do I implement fallback strategy for Georgian language?

Doing font-family: Myriad Pro, Arial, Serif didn't do anything. As this is mechanism to skip font if browser doesn't have it or understand it...

What are my options?

What is a correct way of handling this?

I really would like to avoid php/css that is outputing css font-family based on selected language using php... Is there a cleaner solution??

Ty.

Answer 1

Since your screen shot contains some Georgian letters, there must be some font in your system that contains them (unless they are in an image, of course). This suggests that there is something wrong with font handling. When you specify, say, font-family: Myriad Pro, then a browser should deal with characters not present in that font by picking them up from some other font(s). However, browsers (especially IE) are known to fail to do so too often.

Relatively few fonts contain Georgian letters. For a good (but not perfect) overview, check out Fileformat.info page on font support to Georgian letter an.

The solution is to specify explicitly a fallback font that does contain the Georgian letters. Arial won’t do, as it lacks them. The only (reasonably) safe way is to use a downloadable font (web font) via @font-face. If you are using Myriad Pro, a purely sans-serif font, for Latin letters, it would be typographically best to use a sans-serif font with roughly the same x-height. Consider using DejaVu Sans, a nice free font (and FontSquirrel @font-face generator).

Your CSS rule could then have

font-family: Myriad Pro, DejaVu Sans, sans-serif;