Hostingheaderbarlogoj
Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.
Advertisement

Figuring Out @font-face

by
Gift

Want a free year on Tuts+ (worth $180)? Start an InMotion Hosting plan for $3.49/mo.

This post is part of a series called A-Z of Web Typography.
Taking Ems Even Further
Understanding Typographic Hierarchy

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!

Advertisement