We have already talked about typography on the Web and about how to change typefaces, and how they look using CSS rules. For a long time after the Web’s inception, us coders were only able to use a small number of typefaces — the ones that most users had installed as a default on their computers.
In early studies it was shown that there were only 14 typefaces that were installed on most computers — known as “web safe fonts”, they include Arial, Georgia, Times New Roman and Comic Sans.
When it comes to web design, having just 14 “safe” typefaces to work with gives us limitations over how we design. Designers previously had to cheat this limitation by either using images of the text they wanted, or by using Flash with the correct fonts packaged inside — both are really awkward, convoluted ways of getting a typeface on to a web page.
Again, the nerds at W3C decided to solve this problem by coming up with a new system called “web fonts”, which does what it says — it gets a huge variety of typefaces into the browser, even if users don’t have them all installed on their computers.
Think of it like an image. The user doesn’t have the image on their computer, instead they download it when they need it. In this case,
because it’s to do with the look and feel of the site, rather than the content, we will be adding our changes into the CSS files.
There are two ways to add in web fonts. The first is self-hosted files, the second is adding fonts hosted elsewhere, such as Google Fonts.
Self-hosted fonts
The first way is to have fonts that you have within your files, similar to having your own hosted images.
You need to make sure that you’re legally allowed to self-host the font files. You can’t just upload any old file without the permission of the font foundry that made them. There are some amazing font foundries such as Grilli Type, Lineto and Commercial Type that put in a lot of effort and time into making fonts and they deserve to be paid for doing so.
Just like with images, audio and video, there are certain file types that we work with for font files. The most commonly used
file types are OTF, TTF and WOFF — make sure your typeface is in one of these formats.
There are two parts to adding fonts in your CSS: the first is to say what the font is called and what file it is, the second is which tags you want that typeface for.
Let’s say we want to use the typeface GT America and we have a file called “gt-america.otf”. At the top of our CSS file, we would add:
@font-face {
font-family: GT America; src: url(gt-america.otf);
}
The “@font-face” is a CSS command, similar to “@media” or “@keyframes”. We are then giving a name to the font to use later, we can name this whatever we like but it’s generally a good idea to name it after the font itself. The last part is to tell the font where the file is — in this case, the source is a URL called “gt-america.otf”.
Next, we need to say what tags can use GT America. We might just want our h1 tags to have this font, so because we called it “GT America” earlier, we can now use it:
h1 {
font-family: GT America;
}
We could even set the whole page to be in GT America if we wanted to:
body {
font-family: GT America;
}
But what if we have a few different fonts in our typeface? We might have a regular font, a bold font and an italic font. How do we make sure we match everything up?
Let’s pretend that our regular font is the one we’ve hooked up already: “gt-america.otf”. We might also have a bold font called “gt-america- bold.otf”, a regular italic font called “gt-america-italic.otf”, and even a bold italic font called “gt-america-bold-italic.otf”. We need to add three more @font-face statements to match them up:
@font-face {
font-family: GT America; font-weight: 700;
src: url(gt-america-bold.otf);
}
@font-face {
font-family: GT America; font-style: italic;
src: url(gt-america-italic.otf);
}
@font-face {
font-family: GT America; font-style: italic;
font-weight: 700;
src: url(gt-america-bold-italic.otf);
}
Essentially we’re telling our CSS files to look for the right font source when we’re using CSS rules that match. If we use font weight or font style in our rules, find the right font file to use.
For instance, now we can use the bold weight in our tags:
h1 {
font-family: GT America; font-weight: 700;
}
Or maybe the bold italic weight in our h2 tags:
h2 {
font-family: GT America; font-weight: 700;
font-style: italic;
}
The amount of @font-face statements you have depends on the amount you need. Try not to add too many to avoid slowing down your web page loading time. A good rule of thumb is to just use one or two fonts in your designs — any more is excessive.
Other font foundries might want to host the fonts for you for licensing reasons. They might want to let you have a yearly subscription to the typeface rather than a continual license, or they may just want to add new characters over time. Either way, it’s the foundries’ decision and you have to stick with it.
Each foundry will have different instructions on their site about how to add their font to your site. Just follow those and it should be an easy process.
One of the free hosted options is Google Fonts. Google has a range of hundreds of fonts that you can use legally for free — 818 at the time of publication. To use a Google-hosted font, just go to fonts.google.com and pick the font you like. Just as with YouTube and Soundcloud, there will be an “embed” option that will give you a snippet of code that you can code and paste into your code.