I’ve dabbled a bit in custom fonts for websites (using the @font-face CSS property), but this gave me mixed results. So I dug a little deeper on how to get things right. Turns out, it’s not that easy and requires a little knowledge of a lot of things. Here are 5 resources that will help you get started.
1. Fonts
There are numerous (literally thousands) of summing up some of the best new (and free) fonts out there. Here’s a nice example to get you started.
2. @font-face Generator
With your font in hand, the trick is to make it work with as many browsers as possible. There are many proprietary CSS properties and even more undocumented “features”. Luckily, font Squirrel’s Font-Face Generator does all the hard work for you. Upload your font and you get a pack in return containing a demo that will work in most modern browsers (and even a few old ones).
There’s one huge caveat though, if you’re font doesn’t include all the right rendering hints, you might end up with pixelated looking fonts. This is especially annoying for thin and small fonts. Of course, many fonts don’t include the hints, especially the free fonts seem to be lacking them (furthermore, this is almost never properly indicated on download pages)
3. Scaling It Down
So if you still love your font, but it looks like a mess for full length articles, why not use it for headers or other small highlights? This technique on 24 ways shows how you can spice up a simple text by replacing only one character.
4. Using Default and Existing Fonts
When all else fails, CSS has a powerful mechanism to specify how and which fonts to use to render pages. You can create a font stack that will try to use existing fonts on the user’s computer, but in your preferred order. Code Style offers an in-depth look at pre-build stacks that will give you optimal results across browsers and different computer types.
5. Typography
Not only should you be selecting fonts, you should also use them in the correct setting. I Love Typography has a short and clear introduction to typography. With tips I’ll be incorporating in the blog design soon.
