How to add a fallback font for a non supported character in font-face?

css, font-face, hebrew, html, utf-8

Solution

Actually if I understand your question right you can by using css `unicode-range`

see @font-face/unicode-range at: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range

and a quick example:

@font-face {
    font-family: Almoni;
    src: url(Almoni.ttf);
    unicode-range: U+0590-05FF;
}
@font-face {
    font-family: CoolOtherLanguageFont;
    src: url(CoolOtherLanguageFont.ttf);
    unicode-range: U+0370-03FF, U+1F00-1FFF;
}
body {
    font-family: Almoni, CoolOtherLanguageFont, Helvetica;
}

Problem

I am using a custom font face for the Hebrew language on a site and I am missing the whole set of English characters a-b, A-Z. Right now I use the font (reformaregular) on the `body` tag: ``` body { font-family: 'reformaregular', Arial, Halvetica, sans-serif; } ``` English characters come up in the system default of a serif font Times New Roman on windows: Notice the English serif at the bottom and custom hebrew font at the top. Aside from tagging everything with a custom `.en` class; My question is how do I add a fallback for the English font?

Original source

Related problems