XF 2.3 Font fallback

Wildcat Media

Well-known member
Licensed customer
If I use a font with a limited character set, will missing characters use fallback fonts, or show up as 'broken' (missing) characters when rendered in the browser?

I am thinking the latter happens, but wanted to be sure.
 
Solution
You're correct — the browser uses fallback fonts for any missing characters. It won't show broken/missing glyphs as long as there's a fallback font in the stack that covers those characters.

The way it works: the browser goes through your font-family list left to right. If the primary font doesn't have a glyph for a specific character, it moves to the next font in the stack, then the next, and so on until it finds one that has it. If none of your declared fonts have it, the browser falls back to the system default (which varies by OS — usually something like Arial on Windows, Helvetica on Mac, etc.).

In XenForo 2.3, the default font stack is set via the Style Properties under General > Typography. If you're using a custom font, make...
You're correct — the browser uses fallback fonts for any missing characters. It won't show broken/missing glyphs as long as there's a fallback font in the stack that covers those characters.

The way it works: the browser goes through your font-family list left to right. If the primary font doesn't have a glyph for a specific character, it moves to the next font in the stack, then the next, and so on until it finds one that has it. If none of your declared fonts have it, the browser falls back to the system default (which varies by OS — usually something like Arial on Windows, Helvetica on Mac, etc.).

In XenForo 2.3, the default font stack is set via the Style Properties under General > Typography. If you're using a custom font, make sure you have good fallbacks after it. Something like:

'Your Custom Font', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif

That way if your font is missing a character — say an accented letter or a CJK character — the browser will pick it up from one of the system fonts instead of showing a blank box.

The only time you'd see broken characters (the little rectangles or question marks) is if none of the fonts in the entire fallback chain — including system defaults — have the glyph. That's pretty rare for Latin characters but can happen with uncommon Unicode symbols or emoji on older systems.
 
Solution
You're correct — the browser uses fallback fonts for any missing characters. It won't show broken/missing glyphs as long as there's a fallback font in the stack that covers those characters.
Perfect--that covers what I need. I can subset the font I'm using to a much smaller size as I can get rid of some of the extraneous characters that other fonts can supply if needed.
 
Back
Top Bottom