Web fonts are the most revolutionary thing to happen to web typography in years. They allow web designers to choose the most appropriate typefaces for any web page — independent from ‘web safe’ system fonts.
It used to be that if you were designing a webpage, you could only pick from a handful of “web safe” fonts for you design content. These were generic fonts that were present on everyone’s computer and would display the same on every website. There was no guesswork whether your fonts would look the same on another persons computer, they just worked. I guess this was acceptable for a time, but after a while, as you can imagine, all of the websites and pages began to look the same. Sure you could make some larger and some italic, use Arial here and Georgia there, but you were very limited in your creativity. Then, designers began to use images for their headings where they used different, cooler fonts from their system that allowed them to be much, much more creative in their designs. This was revolutionary for me, as I remember, because I was able to really give some flare and added interest to my pages. The new text font really grabbed your attention because it look different than all of the rest. However, this too is becoming a way of the past.
Now it’s official – web fonts are alive and flourishing. I guess font designers and foundries must have started catching onto this opportunity and now are making a ton of new web safe versions for their newer and more popular fonts. Now we designers can feel free and safe to use any fonts that come with a “Web Font” or “Web Safe” classification. Our designs and webpage font usage are only limited to our imagination. With a little bit of research and a little bit of trial and error, your web font selection can be the key to an amazing site design.
The way these “web safe” fonts work is by using the @font-face declaration in your CSS style sheet. This is the key to the whole thing. Then, you place your font files onto your webserver, reference them from your style sheet, and tie them to your HTML tags. A common usage would be as follows:
@font-face {
font-family: 'ChunkFiveRegular';
src: url('fonts/Chunkfive-webfont.woff');
}
h1 {
font-family: 'ChunkFiveRegular';
}
You then add this bit into your CSS style sheet or into your HTML <style> section.
Of course there are limitations. Older browsers do not handle the @font-face declaration and therefore ignore it. They will then default to there user settings and display your fonts how they want. You can prevent this, however, by adding in a secondary font selection with your font-family declaration. Also, IE has some limitations as well since they only accept the “.eot” font file-type. As long as your font family comes with this web font file, you will be fine. You will just have to make sure you delcare that in an IE specific style in your style sheet.
So that is the intro, in a nutshell. If any of this seems like greek to you or is still not making sense, have no fear. I will be digging into the specifics in the next series of articles and will have some step by step tutorials on how to make use of this awesome feature. So stay tuned.