Fly away with @font-face

However, I must warn you: You have been left behind. The WWW has changed over the last few years with the popularity-explosion of custom typography. Web designers now have the freedom that traditional artists have enjoyed for eons.

The ability to easily use any typeface, anywhere, is very tempting. It’s like a warm apple pie sitting on the windowsill – purposefully poised and sensual in its aromas.

Woah, beware! Just like the scolding you got from your mother, so too are there dangers with using @font-face for custom typography.

I am here to help train you in the ways of custom typography; when to apply it, how to apply it and how to avoid an awkward conversation with an unexpected lawyer. So listen up padawan.

A man who has much more expertise in the area of web typography is Jason Santa Maria. Jason is a New York based web designer specialising in typography. His presentation about custom typography on the web is definitely one to watch over your lunchbreak.

[iframe src=”http://player.vimeo.com/video/34178417?byline=0&portrait=0″ width=”100%” height=”400″]

What is @font-face?

Simply put, @font-face is a process whereby a custom font is saved to the server and is downloaded by the browser when a user visits the website.

The @font-face terminology arises by the CSS declaration of the custom font, as shown below:

Custom font as seen in CSS - font face
Custom font as seen in CSS – font face

 

This is dead easy to implement and requires no Javascript or Flash (god forbid) to work. It’s also supported by 92% of web browsers (including mobile devices) and can be used fine in print stylesheet.

Below is an example of the proper way to use a full family of styles (i.e. bold, italics)

Correct way to use family of styles (bold, italics) - font face
Correct way to use family of styles (bold, italics) – font face

 

So there’s nothing scary?

Generally speaking if you’ve covered all the bases you’re good to go. However, nobody’s perfect so it’s good to go over a couple of the issues people gloss over when using @font-face.

Use the full range of file types

It’s important to only use a typeface in your design if you have all the font files to embed on your server. Different browsers use different font files, so if you want that > 90% success rate you’ll need to cover your bases:

  • Internet Explorer (all versions) use EOT files,
  • Safari (3.2+) uses TTF/OTF files,
  • The iPhone (3.1) uses SVG files,
  • Chrome uses SVG (and as of 2010) TTF/OFT files,
  • Firefox (3.5+) uses TTF/OTF and (as of 3.6) WOFF files,
  • Opera (10+) uses TTF/OTF files.

My advice is to only use a typeface if you have all the versions of the font (listed above).

License to Embed

Despite popular belief, you can’t legally use any font you can get your hands on online. As we talked about before, @font-face saves the files to the server so that the user’s browser can download them.

Due to this extra interaction (compared to viewing it in an image) there are extra licensing issues (and sometimes costs) to consider. Most fonts will come with a Read Me or License file which explicitly outlines what the font you’ve purchased/downloaded can be used for. The @font-face method is so widely used now that it would be unlikely you’ll find a font that doesn’t address its usability online.

If you don’t have the rights to use the font, don’t use it. Chances are you would get away with it, but would you risk your client’s site (and your reputation) for a particular typeface?

Finding great fonts

There’s a plethora of websites offering a wide range of discounted or free-to-download fonts out there. One of the biggest catalogues comes from Font Squirrel, who collects and showcases great fonts that are free to use.

Font Squirrel also addresses the licensing issue, with easy to understand licensing that shows whether you can use the font for commercial use, @font-face embedding, for books and PDFs and for applications and software. They also provide a handy webfont generator to ensure you have all the different font file types you’ll need.

Web hosted fonts vs @font-face

There are several websites offering a paid service whereby the font is hosted on their services and is displayed on your website via Javascript. These services have pros and cons of their own:

  • Because the fonts are secure on the service’s website, licensing is much more reasonable for large font foundries so you’ll see some big name fonts on these services.
  • They will almost always have a subscription fee, which could be a deal breaker for tighter budgets.
  • Having to use Javascript can be a hindrance to purists, although many sites keep the code down to one or two lines.

The better option is for you to decide. I find @font-face more accessible for smaller websites, but if I were to lean towards a service I would look at Typekit first as it’s a popular option and is included in the Creative Cloud provided by Adobe.

A little bit of inspiration

With great power comes great responsibility. Just because you have the flexibility to fly away with @font-face doesn’t mean you can sacrifice your basic design principles. I’ve listed some great examples of typography that have stood out to me.

I wish you the best on your quest for success. Enjoy @font-face and reap the rewards of leaving your cave-dwelling lifestyle behind.

Big Bite Creative

Big Bite Creative - using font face
Big Bite Creative – using font face

 

Bold Kind

Bold King - using font face
Bold King – using font face

 

 

Whiteboard

Whiteboard - using font face
Whiteboard – using font face

 

Makeshift

Makeshift - using font face
Makeshift – using font face

 

War Child

War Child - using font face
War Child – using font face