Using CSS to Display Fonts for Greek and Hebrew, but not English

By BylineJohn Dyer on

If you have a website that mixes Latin characters languages like English or Spanish with characters from a non-Latin language like Greek, Hebrew, or Arabic it usually requires a lot of extra CSS classes and <span> tags.
The good news is that there’s an easier way. You can do all of this without <span> tags for each language using the the CSS unicode-range property. It’s lets you create a font stack per language. Here’s a complete example with both Greek and Hebrew:

CSS

@font-face {
	font-family: EzraSILW;
	src: url(SILEOT.woff);
	unicode-range: U+0590-05FF;
}
@font-face {
	font-family: GentiumPlusW;
	font-style: italic;
	src: url(GentiumPlus-I.woff);
	unicode-range: U+0370-03FF, U+1F00-1FFF;
}
body {
	font-family: EzraSILW, GentiumPlusW, Arial;
}

I’ve defined two @font-faces, one for Greek and one for Hebrew, and then specified that they should only apply to the Unicode range for Greek and Hebrew respectively. Then the body font stack will apply them only to the characters in that range and then fall back to Arial for those outside the range.

HTML

<p>This paragraph is in English, using the core Latin unicode letters (unicode-range: U+00-FF) </p>
<p>Below this paragraph is a sentence in Greek (unicode-range: U+00-FF) John 1:1</p>
<p>Ἐν ἀρχῇ ἦν ὁ λόγος, καὶ ὁ λόγος ἦν πρὸς τὸν θεόν, καὶ θεὸς ἦν ὁ λόγος.</p>
<p>Below this paragraph is a sentence in Hebrew (unicode-range: U+00-FF) Genesis 1:1</p>
<p>בְּרֵאשִׁ֖ית בָּרָ֣א אֱלֹהִ֑ים אֵ֥ת הַשָּׁמַ֖יִם וְאֵ֥ת הָאָֽרֶץ׃</p>

This is just some simple paragraphs with no additional markup, but because I have all the necessary fonts and unicode ranges it all “just works.” To see it in action, just hit the link below. Also, more details and techniques from Drew McLellan on 24ways.
Live Example »
 

4 thoughts on “Using CSS to Display Fonts for Greek and Hebrew, but not English”

  1. You can then subset the Greek and Hebrew font files to the same Unicode ranges. Gentium Plus is a large font and most of its characters (over 4000!) are not needed here. A service like Font Squirrel’s Generator makes it easy to subset the fonts to the Unicode ranges you specified and reduce the file sizes.
    Subsetting the fonts also provides the best fallback for browsers that don’t support unicode-range. When a character isn’t in the subset Greek or Hebrew fonts (namely, Roman letters for English), the browser will use the first font in the font stack that does — Arial, in this case.

Comments are closed.