html font priority - can you specify two or more fonts?

Question

I am working with html files directly, and using English, Greek, Hebrew and Aramaic mixed in my text. I have created a font for some Ancient Hebrew also. What I want to do is set up styles such that several fonts are specified; one for the basic default like Arial, but my own font for Hebrew, so that when I am writing a paragraph in html I don't have to continually switch back and forth between font or style tags for every other word in English then Hebrew then English. My font only has Unicode Hebrew defined. So can I specify both Arial and my font, so when I type a Hebrew letter, it shows using my font and for everything else it shows in the other font I specified?

I am thinking if such a thing exists, it would make sense to me to work one of two (or more) ways:

1. If I could specify a Unicode range for one font, or even two fonts and the other gets the rest. or
2. If the font selection tags could be nested so that the inner font would be used for all the characters defined in it, then the next font for those not defined in the first. And perhaps have a third or default font that would catch the rest. (I know that there already is a default fall-back system in place, but I don't know how to gain control of the defaults, or whether that would give me what I want anyway.)

Is there a font mapping or font substitution mechanism that would address what I want?

Any help would be appreciated. Thanks, Harvey

Answer 1

If your own font contains Hebrew characters only, you can simply use a font-family declaration that lists that font first:

font-family: MyHebrew, Arial, sans-serif;

By basic CSS principles, your Hebrew font would then be used for all characters contained in it, independently of whether the other fonts have them, too.

It would be more complicated if your font contained, say, Latin letters too and you did not want to use them. In that case, a unicode-range definition in a @font-face would help in principle, but due to limited support to it, it would be more practical to use span elements to wrap pieces of text in elements and set different fonts on them.

Note: there is (probably) no font named “Ariel”. The commonly used sans-serif font is “Arial”.

Answer 2

You can specify alternative font if previous is unavailable in user browser:

font-family: MySuperCoolFont, "Times New Roman", Georgia, Serif;

Or you can define different classes for different fonts:

.normal{
    font-family: Arial;
}

.foo{
    font-family: MySuperCoolFont;
}

<div class='normal'>
    Some normal text <span class='foo'>Text in MySuperCoolFont</span>
    normal text continued.
</div>