Web fonts using @font-face CSS rules
A new design opportunity or are we opening a Pandora’s box?
If you were lucky enough to be at Webstock 2011 in Wellington, New Zealand you may have had the chance to sit on Jason Santa Maria’s talk on typography and that just by using CSS 3 techniques our web pages can be beautiful works of art where the typography itself speaks to your users.
What Jason didn’t really explain is that is actually harder than it looks. He did however remind us that just because a font face is available doesn’t mean we should it. Some fonts are made to big, brash and bold, but they don’t look so good when the text is small. Equally there are fonts that make your content harder to read no matter how big the font is. And there are fonts that are just plain ugly.
Attention to detail is everything.
Jason’s talk got me thinking…
“Why can’t I start using this technique with sites I’m currently working on?”
Enter the complications of working on New Zealand Government websites. New Zealand has two official written languages, English and Māori. //[Edit: As Robyn pointed out in the comments below, New Zealand has a third official language, New Zealand sign language.]
To write the word Māori correctly, and many other words in “te reo” or “the language”, a macron over one or more letters in a word is often needed. In order to do this, you need a font that includes an extended character set not just the usual Latin characters A-Z.
Proceed with caution
Choose a font that works both visually and technically
Not all web fonts available include the extended character set. So depending on your design you might get some unexpected results. The macronised characters might just disappear, they might be replaced by a box or in some cases a decorative glyph (like a smiley face, or a flower) may result.
Many New Zealand Government websites include some degree of Te Reo content. Each site seems to approach the issue of multi-lingual content in a different way. I’m not saying this is a bad thing, provided it is done with the interests of site users in mind—but that’s a completely different blog post for a later time.
How to find a suitable font face that works on a NZ government site
Like so many things on the Internet, there is usually more than one place where you can find things, and this is the case with web fonts. A quick search in a common search engine revealed a number of potential sources:
- Google’s font API – google.com/webfonts/preview
- TypeKit – typekit.com
- MyFonts – new.myfonts.com
- FontEX – fontex.org
Google’s font API
The number of fonts available is limited, but growing. I did a sample test of each font family listed and only 25% of them seem to support macrons. Of that 25% only a handful of the fonts, in my opinion, would actually be of use on a government website.
Here’s the list of fonts that worked:
- Cantarell
- Coda
- Coda Caption
- Corben
- Covered by Your Grace
- Crimson Text
- Crushed
- Cuprum
- Droid Sans Mono
- GFS Didot
- GFS Neohellenic
- Gruppo
- Just Another Hand
- Just Me Again Down Here
- Lekton
- Luckiest Guy
- Meddon
- Molengo
- OFC Sports Mill Goudy TT
- PT Sans
- PT Sans Caption
- PT Sans Narrow
- Radley
- Reenie Beanie
- Syncopate
Typekit.com
Even though the site has the facility for you to enter in your own text which is then used for the preview of each font, the input field not only ignored macron characters, testing was impossible as it removed the macron characters from the input field.
Some classy javascript there TypeKit.
[Probably means I personally won't use this site to find font faces.]
MyFonts.com
The search engine on this site turned out to be pretty useful. Not only can you specify a wide range of criteria, including pricing, format, you can specify whether certain characters are available in the font face.
I searched for “webfont” compatible fonts that included the “ā” character.
2381 fonts matched the search criteria
You can visually preview each font, add other filters, change sort order etc, so finding something that works for you should be pretty straight-forward. Some fonts are free, others you need to buy a license for.
FontEx.org
This site seems to have a focus on freely available font faces. Unlike TypeKit, its text entry field doesn’t strip macrons from characters so it is possible to test out a font face before you download it.
I didn’t test every font they have available, but looking through a mixture of monospaced, sans-serif, serif and slab-serif fonts I managed to find 25 fonts, and most of them would work on a government website. Things may be looking up after all.
Here’s the list of fonts that worked from FontEx:
- Monospaced
- Anonymous Pro
- Droid Sans Mono
- Liberation Mono
- Luxi Mono
- Sax Mono
- Sans serif
- Capsula
- Caviar Dreams
- Comfortaa
- Jesaya Free
- Liberation Sans
- Luxi Sans
- Molengo
- Negotiate
- Ubuntu
- Serif
- Berylium
- Credit Valley
- Droid Serif
- Dustimo Roman
- Gentium
- Immortal
- Liberation Serif
- Linux Libertine
- Luxi Serif
- New Athena
- Slab Serif
- Charis Sil
Found a typeface you want to use?
“I can just download this font, put it on my web server and start using it. Right?”
Unfortunately no.
The web is not that simple. Even if you are not adhering to the New Zealand Government web publishing standards, you need to make sure your design is cross-browser compatible. And guess what? The manufacturers of the main browsers, IE, FireFox, Safari and Opera can’t agree (or choose not to use) a common standard. Then you need to think about mobile device support.
I’m starting to think Arial and Verdana are both looking kinda pretty again. That said, I’m still determined to at least try some new type faces out.
Conversions, trickery and hacks
Some preliminary research tells me that once you’ve selected your font you need to convert it into at least two additional formats, and put all of these fonts on your web server.
Then there’s also some CSS tricky needed to make the variety of browsers behave.
Then because each browser and operating system renders fonts slightly differently, some tweaks and fine tuning might be required, and dare I say some CSS hacks too. Even the suggestion of that leaves a bitter taste in my mouth.
Head. Desk. Thump.
Just what we web publishers, designers and coders need. More complexity.
I’ll bring you more details about implementation when I’ve had a chance to try a few things out.
Thanks this is great!
Also Ubuntu seems to ‘macronise’ too
Good post. Technically, any font that is UTF-8 or Unicode-capable should support macrons, which occur just above the 256 character cut-off point that older fonts use. The older “Maori-ised” fonts that Redfish developed in the 90′s should not be used as they merely hacked the glyphs to substitute a macron for an umlaut, on the basis that NZ English and Maori don’t use umlauts (or diaereses) so no-one would need those. Fine in print, but not on the web. A bit naïve of them, really
It appears that most font creators couldn’t be assed creating the full character set, a symptom of them being from the USA perhaps? I could understand if we needed to use some bizarre notation that we might experience difficulties but from what I can see even a number of the European languages that use various accents and flourishes will suffer the same limitations.
As well as Hawaiian. For many it is laziness, for most, I think it is ignorance.
Just a teeny tiny point, which, while not being strictly relevant to this post is worth mentioning. We have three official languages, the third being New Zealand Sign Language. Interesting post though.
And no captcha. Well done you!
Robyn
You are absolutely correct, and that is a major omission on my part. I shall amend the post accordingly.