Advertisement
Typography

Figuring Out @font-face

by

Within the last five years, typography on the web has taken quite an about face (sorry, pun intended). It used to be that web designers were constrained to using web-safe fonts only; system fonts available on all users' computers. As you can imagine (or experienced first-hand), this was frustrating to us type freaks, but we dealt with it. However, in a weird way it was kind of nice because you had a limited set of fonts to choose from, so the time spent picking the perfect font was minimal (I’m not complaining). Now though, a font specific to the look and feel you want to achieve is possible, and companies can now project their visual brand language through typography.

So along came a few methods of serving type to our websites, the most used being @font-face. This CSS rule gives us the ability to download fonts from a server and use them on our stunning web pages. At first, browser support was minimal, but it is now widely supported. The only notable exception being Opera Mini (c’mon guys).


The Basics

@font-face is a CSS rule which specifies the name of the font, its location and the font-weight. In the simplified example below, the font is being stored on font-face.com and the specific path is defined. It could look something like this:

@font-face {
font-family: ‘DeliciousRoman’;
src: url(‘http://www.font-face.com/fonts/delicious/Delicious-Roman.otf’);
font-weight:400;
}

You can see that the name of the font is set to “DeliciousRoman”. This is the font name that would then be referenced in our CSS font stack, along with fallback fonts if the font doesn’t load:

.example {
font-family: ‘DeliciousRoman’, Arial, sans-serif;
}

Browser Compatibility

However, things aren't quite this simple. As different browsers require different font formats, we must be sure that we're providing all the options that are needed.

Here's a list of browsers along with the file types they support:

  • Internet Explorer: EOT
  • Mozilla browsers: OTF and TTF
  • Safari and Opera: OTF, TTF and SVG
  • Chrome: TTF and SVG
  • Mobile browsers like Safari on the iPad and iPhone: SVG

The Compatibility Story so Far

There have been several different conventions within @font-face to address the issue of browser compatibility. It's good to know how @font-face has evolved, and the following quick history provides links to a solid amount of reading on the subject.

Paul Irish originally came up with the Bulletproof @font-face syntax in 2009. Over the years a few hacks have appeared to address the issue of browser compatibility, the most controversial being the smiley face hack.

Another version came out called the Mo' Bulletproofer Syntax by Richard Fink, addressing font issues which occured in Android.

Finally, we've arrived at the FontSpring @font-face syntax. This approach simplifies much of the language and looks like:

@font-face {
	font-family: 'DeliciousRoman';
	src: url('fonts/DeliciousRoman-webfont.eot?#iefix') format('embedded-opentype'),
	     url('fonts/DeliciousRoman-webfont.woff') format('woff'),
	     url('fonts/DeliciousRoman-webfont.ttf')  format('truetype'),
	     url('fonts/DeliciousRoman-webfont.svg#svgDeliciousRoman') format('svg');
	}

In the example above, you can see the fonts are self-hosted and are stored on the server in a folder called "fonts".

So Where do I Get all These Font Formats?

Font Squirrel (and a few others) provide a handy webfont generator that will convert any font into a kit of web files for embedding. Included in the kit you'll find all of the requisite font files, the specific @font-face CSS syntax, and an HTML demo. You can then place the font files directly on your server and adjust the path in the @font-face CSS.

Note: Fair warning though, be sure you have sufficient rights to use fonts you run through the generator and use on your site.


Using a Font Hosting Service

Depending on whether you self host or use a font service like Typekit (more on this later), your CSS would look a bit different. For example, with a service like Typekit, you create, well, "kits" of fonts that contain all of the fonts you will use for each specific website. For each kit you create you are given a JavaScript snippet to place in the <head> of your HTML document. This snippet loads the correct @font-face rules for that specific browser.

For more on why TypeKit uses JavaScript, read Better web font loading with JavaScript.

In the kit settings fonts.com offers you'll find three different publishing options with premium plan memberships. In addition to a javascript option similar to Typekit, they also offer a non-JavaScript option that links to a served style sheet and a self-hosted option. Depending on what you choose, obviously your CSS will look a little different.

Free Fonts or Font Hosting?

As you can imagine, font licensing becomes a big issue when using fonts on the web. The widespread use of @font-face has brought on quite the explosion of free fonts, some of which are really good, some of which are not. Font Squirrel, Fontex and DaFont are a couple of the better known options for free fonts. Lost Type Coop is another great place to pick up fonts, donations accepted. Google Fonts also offers a huge selection of free fonts, although in my opinion some are of poor quality.

Font Hosting Services

The font hosting industry has grown by leaps and bounds over the past couple years. Font hosting allows you to license some of your favorite fonts–and in many cases better quality than free fonts–for use on the web. Typekit was one of the first big players into this market and has a really nice selection of fonts. Over time they’ve added some better-known fonts like Futura and Meta and have made several fonts well known in the web world.

Fonts.com offers licensing for its library of over 150,000 fonts which contains some of the most popular fonts in the world like Avenir, Frutiger, Univers, and Din to name a few. This service has a couple of unique features that I like a lot: Depending on what level membership you have, it integrates SkyFonts which basically allows you to “rent” fonts for a period of time, most commonly in one or thirty day increments. This allows you to use the font in desktop applications for mockup purposes. Additionally, with a premium membership, you can download the font kit and self-host your own fonts, increasing loading times.

One of the brand new services to have caused quite a stir recently is HF&J’s launch of cloud typography. HF&J is widely considered to be the authority on typography and their fonts live up to that reputation. A web offering from these fellows has been long awaited as they redesigned each of their fonts for the screen. They’ve pretty much raised the bar, making 9pt. Gotham readable on screen. It’s really amazing.

This scaled screenshot obviously doesn't do it justice..
This scaled screenshot obviously doesn't do it justice..

They have a nifty interface packed with killer features, like selecting only the characters in a font that you need, which in turn conserves space and increases load time. Definitely worth checking out.

Pricing

The pricing structure for font hosting services varies, but most of them are based on page views for each site you're using their fonts on. In addition to this, many services such as fonts.com have different pricing tiers which offer different add-ons such as desktop fonts, mock-up fonts and self hosting options. It’s best to see what’s available and choose the service and plan which fits your needs.


Served Fonts vs. Self Hosting

So is it better to use a font hosting service or to self-host? Well, it depends. Here’s a few advantages of each:

Hosting Service (like TypeKit, Fonts.com, HF&J)

  1. Wider selection of high quality fonts.
  2. It’s easy to install.
  3. It’s easy to change site typography as design evolves.
  4. Referencing fonts on a third party server means spreading http requests, which ultimately improves performance.
  5. Files from a third party can (possibly) already be cached by users.

Self Hosting

  1. Faster font rendering (most of the time – this has improved greatly).
  2. No dependency on provider’s up time.
  3. No subscription fees or page view limitations.
  4. No JavaScript dependency for font delivery.

It should be noted that you need to be aware of how many fonts you’re using. When it comes to performance, multiple weights of the same font means that you’re loading another whole font, so be careful as the more fonts you use, the longer the load time. You’ll set some alarms off on TypeKit once your kit is over 500k, but less is more in this case.


That’s it

Well done, you’re now educated on the basics of @font-face and the many ways it can be used! Be sure to keep up with the new tools and methods of integrating fonts on the web-as with anything on the web, it changes fast!

Related Posts
  • Code
    Theme Development
    The Beginner's Guide to Icon Fonts in WordPressIcon fonts
    I like social icons, I'll admit it. I have literally dozens of social icon sets I've collected over the last few years, and have even created a few sets of my own to try to achieve that perfect fit for a particular project. But lately, I've discovered icon fonts, and I haven't been using those old image icons in a while.Read More…
  • Design & Illustration
    Web Design
    SVG Files: From Illustrator to the WebSvg thumb retina
    Scalable Vector Graphics (SVG) is a vector image format which began life back in 1998. It was always developed with the web in mind, but only now has the web actually started to catch up. There's no denying its relevance today, so let's have a look at the basics of taking SVG from Illustrator to the web browser.Read More…
  • Web Design
    Design Theory
    CSS3, Web Fonts and IconsDsfd webfonts retina
    We’re really lucky to be working in an industry like the web industry. Nowadays, we have so many new tips and techniques and ways of working all of the time. We’re also really lucky that we’re in an age where, as these new technologies are introduced, our browsers can (for the most part) be pretty quick to catch up, so we get to put these new technologies into our designs (and gasp, even into client work!) more than ever before.Read More…
  • Web Design
    Javascript
    Responsive Design, Retina Images and Debugging for Google Maps APIGoogle map rwd retina
    This final part of the Google Maps API For Designers series rounds things up by looking at responsive design, retina images and a range of testing and debugging tools which make life a lot easier.  It gives a whistle-stop tour through a whole range of areas, which you can explore further in your own projects.Read More…
  • Web Design
    Typography
    H&FJ Web Fonts: A Field GuideHfj retina
    Since Hoefler & Frere-Jones announced their foray into the world of web fonts, the internet has been overflowing with the rejoicing of designers and typographers everywhere. Finally, one of the most popular type foundries out there has released their long-awaited competitor to the web font services of late!Read More…
  • Web Design
    Typography
    Web Font Services: the Good, the Bad, and the UglyPreview
    In this article we'll be taking a look at a few of the most popular web font services, comparing features between them and talking about some of the red flags involved with working with real fonts on the web.Read More…