Any way to incorporate two different fonts in a heading (e.g., <h1>, <h2>, etc.)?

Question

So, on my blog, I am often using both English words and Hebrew, Arabic, and Greek words in headings. I would like the English words to be a particular font (e.g., Calibri), and the Hebrew words to be a particular font (e.g., SBL Hebrew), and the Arabic words to be a particular font (e.g., Traditional Arabic)...and so on.

Is there any way to accomplish this?

This is currently my HTML code for the h1 heading:

h1.entry-title,
h1.archive-title {
    color: #333;
    font-family: Hebrew, "SBL Hebrew", "Times New Roman", serif;
    font-size: 2.2em;
    font-size: 28px;
    font-weight: 200;
    line-height: 1.25em;
    margin: 1em 0 0.4em 0;
    text-align: center;
}

Answer 1

Font-Family fallback

The most basic way is too create font-family fallback. This will work only with per-language fonts (SBL Hebrew can't render arabic or english, Rraditional Arabic can't render English, etc.)

font-family: "SBL Hebrew", "Traditional Arabic", Calibri;    

And a working example: http://jsfiddle.net/cWzwT/

---

lang attribute

You can also try the following method showed in this post - Internationalization Language CSS :

:lang(he) { font-family: "SBL Hebrew" }
:lang(ar) { font-family: "Traditional Arabic" }

Using the :lang method shown here is compatible with most modern browsers so it should do the trick. It probably requires to add a lang attribute to the element, so I don't know if that exactly fits your problem.

---

unicode-range

Another more general way is using the unicode-range. For example

@font-face {
    font-family: "SBL Hebrew";
    unicode-range: U+05-90, U+05-FF;
}

For further reading:

• Creating Custom Font Stacks with Unicode-Range.

• Can CSS choose a different default font and size depending on Language

• Here's a table with the unicode ranges.