Using Web Fonts

Since the core tech behind this site is now in place, is running well, and supports a great workflow for me, it is time to spend more time on the design. Though I will be seeking input at some point, I will be having a go at this design alone for a while. Typography is key to any design and is something I am putting quite a bit of effort into. This post is describing some of what I’m putting into place now, even though I might turn around and change it soon. Either way, it gives me an excuse to talk about web fonts.

Web fonts are awesome. We used to be limited to a very small set of fonts we could use safely across browsers. Now we can simply have the browsers download the typefaces we want and we get the control over the typeface that we have wanted for so long. And fortunately it’s a fairly simple process. I have two different uses for web fonts on this site now (at least one more is coming soon) and I figured I would talk about both.

Serving a Web Font to Solve a Greek Problem

This site uses a good deal of Greek text. My technical posts are often short on Greek but many of my historical or biblical-studies related posts have Greek in them. I also posted some old Greek manuscript collations that I had started as well as a few Greek texts that I started to digitize. At this point both are terribly unstyled. I will get to that.

Anyway, I need a reliable Greek font. Previously my body copy was simply specified as “serif”, which sometimes worked, depending on the browser. Desktop browsers tend to default around 16px pixels, which I sized up by 1.3em, so the final text was around 21px. I like my continuous-running text to be of a good size. But at that size given the font choice, from worst to best...

• IE 10 on Windows - The text looks pretty grainy. BTW, I have ClearType on.
• Geeksphone Keon (Firefox OS preview) - The text looks pretty meh.
• Chrome on Windows - The text looks pretty good.
• IE on Nokia Lumia 900 (WP 7.5) - The text looks pretty good.
• Firefox on Windows - The text looks almost exactly like Chrome, so good.
• Chrome on Mac - The text looks good though a little darker than I would like. Perhaps midway between what I see here and Chrome on Windows would be great. This is a non-retina device.
• Safari on Mac - The texts looks just like Chrome on the Mac.
• Browser on an Android LG device (2.3.5) - The text looks pretty good.
• Chrome and Default browser on Galaxy SIII (Android 4.1) - The text looks gorgeous.
• Safari on an iPhone 5 (iOS 7 beta) - The text looks gorgeous.
• Safari on an iPhone 4S (iOS 6.1.3) - The text looks gorgeous.
• Safari on a 3rd gen iPad (iOS 6.1.3) - The text looks gorgeous.

Text rendering has both a hardware and software component to it. I think The higher resolution screens on the Galaxy SIII, the iPhones and the iPad really give them the leg up to allow them outdo the competition. The difference is so incredibly drastic.

I am wondering if Parallels is affecting my font rendering in IE (it is just so bad). I tried the same text in IE 10 on Windows 7 and things improved. Not sure what the real problem is here.

Unfortunately, there were major issues with the Greek rendering. Some of the Greek glyphs in the default serif typeface for IE were just horrendous. Also, both the Firefox OS preview device, the Galaxy SIII and the LG Android running 2.3.5 had issues rendering glyphs with diacritics, so clearly something needed to be done. To solve this, I turned to an old standby, Gentium. This font not only sports a beautiful Greek typeface, its Latin-alphabet serif type is nice as well. So I decided to try it as my primary font. After downloading, I added this in my CSS file and changed the font selection for text.

@font-face {
  font-family: Gentium;
  src: url('/content/themes/fonts/gentium/web/GentiumPlus-R.woff');
}

p {
  font-family: Gentium, serif;
}

That first @font-face rule downloads the fonts and sets its name as “Gentium,” which I can then reference. The second rule applied the font. So how did this do in the device testing? It made everything good on IE10 on Windows 8, fixed the glyph problems for Firefox OS and the Galaxy SIII (both browsers). The Windows Phone 7.5 did not use the web font. Apparently this feature is completely unsupported for that OS (sigh). But this is not too bad. The typeface used is suboptimal but is readable. Worse, however, was the Android 2.3.5 device because it continued to have problems with glyphs with diacritics. The text was unreadable.

After a little research I found out a few things. First, (apparently) the Android browser (even in 4.x) is supposedly not supposed to support the woff format. It was working fine on my Galaxy SIII though. I wonder if this is one of those cases where the manufacturer tweaks the browser. Though this often causes harm, in this case perhaps they actually fixed something. Anyway, as for the Android 2.3.5 device, those do support web fonts using TrueType files. So my CSS changed to the following:

@font-face {
  font-family: Gentium;
  src: url('/content/themes/fonts/gentium/web/GentiumPlus-R.woff') format('woff'),
    url('/content/themes/fonts/gentium/GentiumPlus-R.ttf') format('truetype');
}

p {
  font-family: Gentium, serif;
}

This worked great and fixed my Android 2.x problems. I now have a workable, readable serif typeface that works across a wide range of desktop and mobile browsers that supports both the Latin and Greek character sets well.

Using a Font Provider

Doing your own web font work as we did above certainly works but there are font providers out there that exist to streamline this and provide fonts for you to use that may not be available otherwise. One good source of fonts is Google fonts, which you should check out but on this site I am using Typekit.

Logically, I am breaking all the text on the site right now into two categories, headline text and body text. Body text was handled in our previous discussion above. I wanted a serif font, so I used Gentium with a fallback of the default serif font on a system. For headline text I wanted a sans-serif typeface and I turned to Typekit to provide me with one.

The typeface that I ended up with is called “JAF FacitWeb”. I wanted a sans-serif typeface to contrast with my serif body type and I liked the look of this one, so I chose it. This is added to my page by adding the following scripts:

  <script type="text/javascript" src="//use.typekit.net/pdu6hvr.js"></script>
  <script type="text/javascript">try { Typekit.load(); } catch (e) { }</script>

This imports everything I need and will not work on your website so if you want to use Typekit, you will have to signup for an account. Typekit is very easy to work with, so if you are looking for some Typefaces to spice up your website design, give it a look.

comments powered by Disqus