How to embed custom fonts in your website (part 1)

A friend of mine used to repeat: “don’t ever think that designing a website layout is the same thing of designing that layout on paper”. That’s absolutely true for many reasons, as instance because screen readability is much lower than paper, another one is that screen resolution is dynamic and can vary by the type of display you’re using while a sheet of paper has always the same size. Anyway the most evident is the different purpouse among the choice of both products: different strategies, different interactivity, different users and different hardware…

Accessibility for different users means that anyone with any hardware and software supporting web standards can view correctly a webpage. Typography makes no exception: one of the most frustrating things that designers come through while designing a website, is the restricted choice of fonts to display text, headlines, etc. Only a fool can think that a visitor would download that-custom-font to view correctly a webpage. It breaks the immediacy of usability, which is the most powerful characteristic of the web medium, though it could sounds like a limit to creativity for someone. Expecially in the last years, we saw a huge improvement of how typography can be used within a webpage. Well… If you’re reading this post, probably you know what I’m talking about.
So, after this long introduction let’s go straight to the point. If you have a good reason to use a custom font in your website be happy: new generation browsers can read CSS3 which has support for custom typography, thanks to the @font-face attribute. This means that the browser manages automatically to download and apply the fonts, without modifying you system font folder. Visitors won’t be bugged anymore!
There are many ways to obtain this, and I’ll explain the easier one. Works good on any browser and it doens’t take too much time to be made.

Choose the font that you want to use

This is really important for two reasons:

• The first involves creativity: it’s your design and I suggest you to use the same level of attention you put on typography on paper (but considering other factors);
• the second one involves copyright. Embedding commercial fonts on a website, may go against owner’s policy (as instance, read the pages about Adobe embedding permissions). Instead, with free, open source and public domain fonts you have not to worry about. If you’re in doubt, better rely on attached license files or asking to who made the font. For a huge collection of free fonts look at the Font Squirrel archive.

Convert the fonts

To make sure that your custom font can be disaplyed correctly on the major browsers you’ve got to know what formats are needed.

• TTF and OTF (TrueType or OpenType) fonts are supported only by Firefox 3.5+, Safari 3.1+, and Opera 10+;
• WOFF is used by Firefox 3.6+
• Internet Explorer supports EOT format since version 4;
• SVG fonts are supported by Chrome 0.3+, Opera 9 and iPhone OS 3.1+.

So many formats… How to make the conversion? There are many, format-specific, tools available, but the faster way is to rely on the web application provided by Font Squirrel: the Font-face generator. With this you simply upload your fonts, set what glyphs you want to convert. Pay attention to this choice: you want to convert only the glyphs you need, in order to have light files (expecially for SVG). As said before, be sure to have the permission to covert and embed the font on your website. Then click OK to start the conversion.
Here we are, you’ll be provided of a .zip containing all the converted fonts plus an example of use with css + and html.
Extract the archive in a folder of your website.

Make your fonts available to the CSS

The first thing is to create a reference to your files inside the css. You’ll need to use the @font-face attribute to accomplish this step. Let’s give a look at a sample code:
@font-face {
font-family: 'TeXGyreHerosRegular';
src: url('texgyreheros-regular.eot');
src: local('TeX Gyre Heros Regular'), local('TeXGyreHeros-Regular'), url('texgyreheros-regular.woff') format('woff'), url('texgyreheros-regular.otf') format('opentype'), url('texgyreheros-regular.svg#TeXGyreHeros-Regular') format('svg');
}
font-family value is a string which contains the name which you want to reference to a specific font. As the example above, when in our page we want to use the texgyreheros-regular font we will reference to TeXGyreHerosRegular. So, later in our CSS code, if we want to have our paragraph written with this character with 12 pixels size, we’ll have to write:
p {
font-family: 'TeXGyreHerosRegular';
size: 12px;
}
You’ve got to create an @font-face reference for each font you want to embed.
Since the font we have choosen is sans-serif, we want to use an alternative type, just in case the embedded font isn’t found (check the URLs which are relative to the location of your HTML or PHP files) or visitors use a very particular browser which doesn’t support custom typography, the paragraph text will be disaplyed with a similar type. So let’s add some more alternative families to prevent mistakes:
p {
font-family: 'TeXGyreHerosRegular', 'Arial', 'Helvetica', 'Helvetica Neue', 'Verdana', sans-serif;
size: 12px;
}
Now write some text inside a paragraph an put it inside your HTML and run the page in your browser. Cool!

In the second part we’ll see how the difference in font disaplying among different browsers and how to add simple effects. Stay tuned and be creative!

Advertisement