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

September 30, 2016 | Bible Tools, HTML/CSS | 4 Comments

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:


@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.


<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 responses to “Using CSS to Display Fonts for Greek and Hebrew, but not English”

  1. Chad says:

    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.

  2. Rob says:

    If you subset Gentium for use in a webpage, be sure to change the name to avoid collisions. It’s important to realize that most font licenses do not allow this type of modification. However, SIL fonts (such as Gentium) are some of the few that do! You can read more about their license here.

  3. Rוננ says:

    The unicode-range is always the same?
    Where I can find table of them?

Hi, I'm John Dyer. In my day job, I build websites and create online seminary software for a seminary in Dallas. I also like to release open source tools including a pretty popular HTML5 video player and build tools that help people find best bible commentaries and do bible study. And just for fun, I also wrote a book on the theology of technology and media.

Fork me on GitHub

Social Widgets powered by