in Development

Working With Web Fonts – What Do You Need To Know

In a recent presentation, Jason Cranford Teague, the author of Fluid Web Typography asked the following question: “What do these three things have in common: flying cars, trips to Jupiter and downloadable web fonts?”  The answer came quickly: we should have them all by the year 2010. Sadly, it’s not completely true; we don’t have flying cars, we can’t find any review about Jupiter on tripadvisor.com but we do find fonts which are not installed on visitor’s computer. They are called @fontface and they have been a part of CSS since 1998, looking like this:

@font-face {
font-family: "League Gothic";
src: url("/type/league_gothic.otf") format("opentype");
}
h1 {
font-family:"League Gothic", Arial, sans-serif;
}

Now, if you know a bit or two about CSS, then the @font-face sintax is pretty much self-explanatory.  Let’s see it step by step: the first thing we do is to define the URL where the font can be found. In our case, the font is League Gothic and it’s located at /type/league_gothic.otf. Once we know this, you add the font in the list just like you would with any other fonts. It’s simple, right? So…why we don’t use this every time? Well, because there are two bumps in the road: the resistance from font foundries and the inconsistence in supported font formats.

If we talk about font foundries, then we can pretty much understand their resistance because they are making money licensing their fonts so they don’t want us to use them for free. The inconsistence is trickier because there are so many formats: some browsers support TTF and OTF, iOS devices need SVG, iExplorer requires only EOT (which is Microsoft’s property), WOFF is supported only by the newest updated browsers, and the list can continue.

Self-hosted web fonts

Because of the huge list of formats, you can’t just use TTF on your site and thinking that everything will be ok. Furthermore, if you do this there is a high chance of violating the EULA from the font foundry because hosting your own fonts means that you need a license for web embedding. A good way to solve this issue is to use services like Font Squirrel. This useful website offers hundreds of free fonts which can be downloaded and embedded in your websites. They also have a generator that can transform your own font in the required format.

1

Web font services

If you don’t want to spend your time with self-hosted fonts then you can use a service which hosts the font for you. This means that you don’t have to bother with the embedding nuances; you only need to choose your favorite font, copy the code snippet and place it in your website. That’s it, your type will be displayed in the font that you wanted.

Among these services I recommend you two places: Typekit and Google Font Directory.

Typekit

2

Typekit is one of the first solutions made for web fonts and it’s probably the most popular one. It was developed by Jeffrey Veen and Jason Santa Maria, two of the industry’s leaders. They are offering a free trial for a single website and an yearly subscription based on the number of monthly pageviews.

Google Font Directory

3

Google released their own font-hosting solution a few years ago and even if their selection is smaller than Fontdeck or Typekit, they are growing larger everyday . The greatest thing about Google’s font directory is that they only hosts creative commons licensed fonts which are completely free.

sIFR and Cufon

Way before @font-face became a real thing, web developers tried a lot of tricks in order to render text in their preferred fonts, dynamically. Among all these tricks, two of them were the most popular: sIFR and Cufon.

The first one, sIFR (pronounced “siffer”) means Scalable Inman Flash Replacement. This basically means that Flash movies are used to display a font using its ability to embed it and show it antialised. This worked by replacing a text block such as an <h1> tag with a Flash movie by using JavaScript. The problem with this approach was that it required both JavaScript and Flash.

The second one, Cufon, transformed the font into a SVG file and then drawing the letters using the canvas element and a JavaScript rendering engine. Even if it sounds complicated, it’s more easier than setting up sIFR and it didn’t required Flash.

So, regardless of the technology used to display a typeface, it is extremely important to understand what is behind a font. If you want to read more, you should start with the basic things such as the glyphs or other elements from a font.

Bogdan

Bogdan is the founder of Top Design Magazine. You can find him in Bucharest-Romania so next time you want to drink a beer there and talk about web and stuff, give him a message.

Leave a Reply