CODEWITHSUNDEEP
cssfontsfont-face
sowasred2012
sowasred2012

Reputation: 735

Fallback fonts on special characters

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.

Upvotes: 25

Views: 14853

Answers (2)

jfrej
jfrej

Reputation: 4648

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.

Upvotes: 30

Jørgen R
Jørgen R

Reputation: 10806

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.

Upvotes: 8

Related Questions