@font-face: what it is
A few months ago I redesigned my client site nudgedesign.ca. I had already played around with the CSS3 @font-face attribute, but wanted to use it a little more on my site. Like a lot of us who had been restricted to the web-safe fonts for years, we suddenly felt like kids in a candy store.
What the @font-face selector allows designers to do is offer up fonts which aren’t normally available on most people’s computers. So instead of relying on the usual default fonts on all user’s computers, you can now link to a font file, either directly on your site or a hosted file like Google’s font API. You then can display that font for your text. In the past if you wanted to use a fancy (or even not so fancy) font, you would have to replace your text with a Photoshop created images. Later CSS sprites the technique became my favorite. It was much more semantic but still required images to be created. But now we have @font-face. It’s cross-browser compatible and requires just a few lines of css.
Where I went wrong :
So back to my site. Being in Montreal, which is a bilingual city, you cannot go without a French site. The English was done and looking lovely, so I started on the French side. I suddenly realized error in my ways. I was using League Gothic, which I am guilty of overuse because of its quality.
I was also using ChunkFive. Although it’s really a beautiful font, it’s missing all the French accent letters. In French, every third letter has an accent (I kid), so you really need those characters.
The options :
So I had to make some choices:
- Option # 1 – Create an image for each missing accents: Adding those missing letters as background images with indented text at first seems like an option. But this would be extremely tedious and require a heck of a lot more mark up.
- Option #2 – Use a completely different font for the French site: This is probably the easiest solution. But the inconsistencies between the sites is not an option for me.
- Option #3 – Simply re-do the site completely
The Lesson
When it comes to @font-face, researching the font and testing ahead of time is always best. Getting some dummy text isn’t enough. Ideally it would be getting the copy ahead of time (I know this isn’t always possible). As for me, well I’m opting for a complete redesign to correct my problem. Luckily I have that choice. Stay tuned for a redesign.