Fallback fonts on special characters

Question

I was wondering if it's possible to, when using @font-face, have a fallback setup so that if the text on my page contains characters that are not accounted for within the font (Japanese characters for example), only those characters are presented in a basic font and every other character remains as the custom font?

I'm imagining that potentially there'd be a mix of two fonts within one paragraph on occasion.

Solution 1

What you described is the default behaviour of a browser - it should naturally fall back to basic font for missing characters.

However, sometimes custom fonts use blank characters, in that case you can try using the unicode-range

For example:

@font-face {
    font-family: BBCBengali;
    src: url(fonts/BBCBengali.ttf) format("opentype");
    unicode-range: U+00-FF;
}

Taken from this interesting article: Creating Custom Font Stacks with Unicode-Range

Unfortunatelly there are browser support issues.

Solution 2

CSS has default fallback to the system font if the specified font doesn't contain a character. You can also specify which font to fall back to.

Example for a serif font:

body {
    font-family: "MyNiceFontWithoutJapanesChars", "common serif font", serif;
}

As long as the fallback font has those characters your default font misses, you should be all right.

Comments

[Jukka K. Korpela]

However, browsers (most notably IE) may fail to work this way. They may misread the font data, or the data itself might be wrong (in its description of character coverage). Testing on several browsers is thus strongly recommendable.

[Keyur Padalia]

Interesting, I always thought the fallback only applied in case the entire font was missing, but really works for individual glyphs too. Citation: CSS 2.1 spec.

[andrybak]

Is there a browser that would fall back to any available font that supports the character if the fonts listed in the CSS don't support the character?