Defining a FontFamily for Greek

I enjoy a beautiful typeface for Greek (or any language for that matter). One of my favorites is the unnamed Greek font used as the default in Logos Bible Software. That aside, SIL has a free font which looks great, especially in Greek: Gentium Book Plus.

I decided it would be nice to use this font whenever Greek Unicode characters are present on this site. I wasn’t sure how to accomplish this at first, but it turns out that CSS allows you to specify Unicode ranges when you are defining a font. Along with properly managing the cascade of styles on the site, font definitions like this did the trick:

@font-face {
  font-family: "SortsMillGoudy";
  src: url("../fonts/sorts-mill-goudy/SortsMillGoudy-Regular.ttf")
    format("truetype");
  font-weight: normal;
  font-style: normal;
  unicode-range: U+0000-024F;
}

@font-face {
  font-family: "GentiumGreek";
  src: url("../fonts/gentium/GentiumBookPlus-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  unicode-range: U+0370-03FF, U+1F00-1FFF; /* Greek ranges */
  font-display: swap;
}

For English and Code, unicode-range: U+0000-024F seems to do the trick. And for Greek, I’m using unicode-range: U+0370-03FF, U+1F00-1FFF;.

And now, some Greek:

καὶ τοῦτο προσεύχομαι ἵνα ἡ ἀγάπη ὑμῶν ἔτι μᾶλλον καὶ μᾶλλον περισσεύῃ ἐν ἐπιγνώσει καὶ πάσῃ αἰσθήσει…