Hebrew and Greek (etc.) on the web

Displaying languages written in non-Roman characters on the Web has always been difficult. In the really old days you had to use pictures instead of text, then among the various work-around fonts that mapped Hebrew or Greek characters and even pointing and accents to Roman characters the SBL ones became a sort of scholarly non-standard standard. You had to try to persuade visitors who did not have those fonts installed to install them (or you could use the Logos or Bibleworks equivalents). The problem was if you chose Logos and your visitor used SBL all they got was Roman gobbledygook. Then came Unicode now you can be sure an aleph א because instead ofbeing some Roman character that just thought it was an aleph, a Unicode aleph really is an aleph. Unicode handles accents, pointing and just about every Hebrew or Greek (and most other languages ancient and modern) mark you might want to make. And the better news is that even if you wrote in XYZ’s special Hebrew font and your user did not have that one it would display in whatever they had. So if I chose SBL Hebrew but you only had Ezra SIL no worries it all worked… Except, if you had a font that only contained consonants and vowels, every accent I placed would show up as an annoying full-sized character sized box. Bummer!

Others may know this already, but for those that did not, here is good news. Using a CSS feature called @font-face we can now cease to worry whether visitors to our blogs and websites will have decent Unicode fonts installed on their machines, or risk those annoying little rectangles!

@font-face allows you to install a font on your server and deliver it with the webpage to your user. (Traditional methods of referring to fonts require the user to have the font on their machine.) It is not totally simple (for you the web-publisher, it is totally simple for your users) but it seems straightforward. Here are step by step instructions:

  1. Download a font that you like (as long as the license will allow this use1 )
  2. Go to the Font Squirrel webfont generator, and upload the font, filling out their form. (Incidentally for those who like changing Roman fonts that site has loads you can use.) Download the ZIP.
  3. UnZip it, and upload it to your webserver to directory called /fonts in the directory where you keep CSS files.2
  4. The ZIP file had a file in it called “stylesheet.css” rename it “fonts.css”.
  5. In the <head> of your HTML put this code BEFORE any other CSS code:
    <link rel="stylesheet" type="text/css" href="/css/fonts/fonts.css" /> if you didn’t call your CSS directory “css” then naturally you’ll have to put the proper path here ;) For a WordPress blog the CSS directory is: wp-content/themes/YOURTHEME (so put the /fonts directory there).

From now on wherever your CSS has something like:

.hebrew {
font-family: EzraSILregular, SBL Hebrew, Times New Roman, serif;

You only need the fall back fonts for people using really old browsers or weird hardware or something. Here is some Hebrew text with all the trimmings in SIL Ezra to prove it:  דִּבְרֵ֣י עָמֹ֔וס אֲשֶׁר־הָיָ֥ה בַנֹּקְדִ֖ים מִתְּקֹ֑ועַ אֲשֶׁר֩ חָזָ֨ה עַל־יִשְׂרָאֵ֜ל בִּימֵ֣י׀ עֻזִּיָּ֣ה מֶֽלֶךְ־יְהוּדָ֗ה וּבִימֵ֞י יָרָבְעָ֤ם בֶּן־יֹואָשׁ֙ מֶ֣לֶךְ יִשְׂרָאֵ֔ל שְׁנָתַ֖יִם לִפְנֵ֥י הָרָֽעַשׁ׃ 2 וַיֹּאמַ֓ר׀ יְהוָה֙ מִצִּיֹּ֣ון יִשְׁאָ֔ג וּמִירוּשָׁלִַ֖ם יִתֵּ֣ן קֹולֹ֑ו וְאָֽבְלוּ֙ נְאֹ֣ות הָרֹעִ֔ים וְיָבֵ֖שׁ רֹ֥אשׁ הַכַּרְמֶֽל׃

HT: http://www.miltonbayer.com/font-face/

PS: Of course, this does not work for people who read the post in a feed reader :(

  1. At present the only fonts that I know permit it are the SIL ones, which have beautifully open licences, but I have written to SBL and should hear soon if they will permit their Unicode fonts to be used this way. Ezra SIL is here. If I hear of other beautiful Hebrew, Greek etc. fonts that are licensed for this use I’ll update this post and make a list here… []
  2. If you don’t already have one why not be daring and call it CSS ;) []

One comment on “Hebrew and Greek (etc.) on the web

  1. Brooke

    Tim, you now have the *only* pointed Hebrew text appearing properly to me in Safari. Thanks for the tip!