Search code examples
htmlcsswebfonts

How do webfonts that don't contain certain chars behave?


I have a webfont that doesn't support Cyrillic. The font only has latin chars. If I try and display some Cyrillic chars, instead of displaying blank or corrupt chars (as I would expect it) it bypasses the webfont and displays them in a system font instead. Whilst this is a good thing I don't know why or how. As I understand it, if a font specified in the CSS isn't supported by a browser or the browser doesn't support webfonts it is then that a substitute font is put in place. However this is happening if the characters used aren't supported. Is my understanding of this correct?


Solution

  • Most browsers do missing character fallback by default, so you never see blank characters when something's missing. If the developer uses a font family stack like font-family: MyCyrillicFont, Arial, sans-serif your browser will use the next available font. Otherwise, the browser itself has a default font setting (that the user can typically choose).

    In short, browsers have fallbacks on the characters level.