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