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.

Answer 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.

Answer 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.