Options for @font-face implementation

Webfont embedding is so widely supported by modern browsers at this point that there’s really no excuse not to incorporate them when appropriate in your designs. There are hundreds of free fonts available for embedding, as well as plenty of paid services that allow you to include commercial fonts in your designs.

A lot of designers, it seems, are intimidated by the idea of @font-face embedding though. Even though it’s been gaining popularity and support for the past couple of years, a lot of designers still stick to their usual collection of web safe fonts for the vast majority of their designs. On the rare occasion they do step out of their comfort zone and include a web font, they just go with a webfont subscription service rather than looking into DIY embedding or something like Google Web Fonts.

In this article, I’ll give you everything you need to know to start embedding your own fonts, and to start using Google Web Fonts. The code itself is simple, and I’ll also break down exactly why we’re using the code we’re using. I’ll even give you ten great examples of web font combinations that you can implement on your own designs in case you’re not yet comfortable with typeface combos.

 

Legalities associated with font embedding

It’s important to start out with a discussion of the legal issues that can be present when embedding fonts on your website. Not all fonts are licensed for that kind of usage, especially commercial fonts. Some require extended licenses, while others prevent the practice all together (or sell a service to handle the embedding for you).

It’s important to check the EULA for whatever fonts you plan to use to make sure @font-face embedding is permitted. If not, you’ll either need to choose a different font, find out if there’s a separate license you can purchase, or see if one of the web font services out there includes your font of choice.

 

Options for embedding

Embedding fonts with @font-face isn’t particularly complicated, but it is a multi-step process. There are a couple of different ways to do this, including some free and paid services as well as a completely DIY method.

DIY embedding

For the best results and the most comprehensive browser support, you’ll want to use a tool like Font Squirrel’s @font-face Generator. This free tool lets you upload any font you have appropriate permissions for and converts it to the various supported font file types for different browsers.

Once you have your font package, you’ll want to upload it to your server, probably in a directory called “fonts” or something similar. Once that’s uploaded, you’ll go into your site’s CSS and include the following code:

@font-face {
font-family: "Dancing Script";
src: url("fonts/DancingScript.eot");
src: local("#"),
     url("fonts/DancingScript.ttf") format("truetype"),
     url("fonts/DancingScript.woff") format ("woff"),
     url("fonts/DancingScript.svg") format ("svg");
}

Line-by-line, this breaks down as follows:

font-family: "Dancing Script";

This part specifies the font name so that we can call it later in our styles.

src: url("fonts/DancingScript.eot");

EOT files are supported by Internet Explorer 4.0 and newer. Without this file, your @font-face implementation won’t work in IE versions older than 9.0.

src: local("#"),

This line prevents a local font from being loaded, if one exists. While some programmers prefer to have the local font load to save bandwidth, the potential for it to cause problems may outweigh the benefits. If someone has a different version of the font installed locally (or, say, a poorly pirated version), it could have a drastic impact on how your design looks. In my opinion, it’s better to play it safe and maintain full control over exactly which font loads.

url("fonts/DancingScript.ttf") format("truetype"),

TrueType fonts are compatible with Mozilla 3.5+, Safari 3.1+, Opera 10+, and Chrome 2.0+.

url("fonts/DancingScript.woff") format ("woff"),

This .woff file will take care of IE 9+, Mozilla 3.6+, Safari 5.1+, Opera Presto, and Chrome 5.0+.

url("fonts/DancingScript.svg") format ("svg");

This final format will take care of Safari 3.1+, Opera 9+, and Chrome 0.3+. SVG is also necessary for iPad and iPhone Safari, as it currently won’t work with other font formats.

Using multiple formats of your fonts is important for maximum browser compatibility. We’ve left out OpenType (otf) fonts here, because they don’t add any compatibility that doesn’t exist with TrueType fonts (and TrueType fonts are compatible with Chrome, while OpenType fonts aren’t).

Now, when you’re ready to call the font in your CSS, you treat it just like a regular web-safe font.

h1 { font: 24px "Dancing Script", "Times New Roman", serif; }

Make sure you specify fallback fonts so that if for some reason the web font doesn’t load (or your visitor is using an unsupported browser), you still have at least some control over how the site looks. If you don’t, then the default font will load, and all too often that’s a monospaced font like Courier New.

Google Web Fonts API

Only a few months ago, the Google Web Fonts API only included a couple dozen fonts. It was great if the font you happened to want to use was included, but otherwise it wasn’t of much practical use. That’s changed.

Google now hosts more than 230 font families, many with multiple styles or weights. And they’re all free to use. This is a great resource for designers who want to use web fonts but don’t necessarily want to host their fonts themselves (possibly due to bandwidth issues).

Google offers three different methods for included fonts: a standard method, which uses a link to a CSS stylesheet in your head, an @import method, and a JavaScript method.

Regardless of which one you decide to use, you don’t have to sign up for any special account, and grabbing fonts is a one-step process (just find the font you want and then click on “Quick-use” to get the code).

Font Services

There are a number of other font services, such as Typekit and Fonts.com Web Fonts, most of which are subscription-based. Their fees vary pretty widely, as do their terms. We covered them in more detail in a previous post.

The main reason to use one of these services is when whatever typeface you want to use (or need to use due to client specifications) isn’t licensed for regular @font-face embedding, but is available through one of these services. Since some of the services are provided by type foundries themselves, there’s a wider selection available.

For the most part, these services work the same as the Google Web Fonts API as far as embedding goes, though each has their own specific method. Another added benefit is that you get support if you’re having issues with embedding or using the fonts.

 

When to use @font-face

Because of relatively widespread support, @font-face can be used on virtually any website. It’s a great way to set apart an otherwise simple and clean design from the millions of other simple and clean designs out there. It can also add extra character to more visually complex designs. There’s really no excuse not to use a great font for at least the headlines on sites you design.

Of course, all of these new options can be really intimidating for designers who aren’t expert typographers. But luckily, there are plenty of resources out there for combining typefaces that can help you come up with your own combinations. In the meantime, below are ten combinations you can use right now, made up of free fonts from either Font Squirrel or Google Web Fonts API.

 

Awesome webfont combos

If you’re not sure where to start combining typefaces, try these combos on for size.

Comic book site

Now there’s absolutely zero excuse to ever use Comic Sans on a website!

Komika Title | Colaborate Light | Komika Text

 

Classic, elegant site

This combination is classic and elegant, but combined with the right background and color scheme, it can also seem fresh and modern.

Dancing Script | Droid Serif | Droid Sans

 

Grunge site

Grunge type is best left to the titles, but that doesn’t mean you can’t also find some great typefaces for your other text.

Copystruct | Cicle | Miso

 

Simple and clean site

Simple and clean used to mean Helvetica. Not any more.

Oswald | Actor | Terminal Dosis Light

 

More grunge

Here’s another alternative for grunge style sites. This one would also work well on an illustrated site.

FFF TUSJ | Brawler | Perspective Sans

 

Retro site

This combination screams mid-century America.

Yellowtail | Josefin Sans Semi-Bold 600 | Rokkitt

 

Feminine site

Feminine doesn’t necessarily have to equal dainty. The details on these typefaces give a feminine touch without being wimpy.

Leckerli One | Snippet | Amaranth

 

Funky and modern site

Funky typefaces add a lot of character. Just make sure you keep readability in mind.

Megrim | Andika | Puritan

 

Formal site

A more formal site requires more formal typography. Here’s a combination of a formal script with traditional serif and sans serif typefaces.

Tangerine | Crimson Text | Rosario

 

Unique and modern sites

Another unique, funky typeface pairing. The contrast between the sharp angles of the title and body fonts with the rounded edges of the meta font is a nice touch and adds a lot of interest.

Geostar | Kelly Slab | Comfortaa

 

Conclusion

As has already been mentioned, there’s really no excuse for not working with @font-face anymore. The rules of good typography still apply, and everything you know about combining websafe fonts carries over. You just have a lot more options now!


How often do you use @font-face in your own projects? Do you DIY or do you use a service? Share your experiences and tips in the comments!

  • http://www.yellowduckwebdesign.co.uk Essex Web Design

    Superb article once again! 

    I especially love the font combo categories, very nice touch. I’m sure we’ll be implementing some of these in the near future.

  • Anonymous

    Great font combo’s very usefull!! Thanks

  • Michael Gunner

    Nice post, but those combinations are awful! Especially the last one. Three different, ugly fonts that really don’t sit comfortably together. They look rushed and for me only go to show that a very simple serif/sans-serif font is always the best choice for copy.

  • http://www.facebook.com/people/Bram-Dijkhuis/1197332618 Bram Dijkhuis

    Nice article. I’m using @ font-face more and more and it really puts something extra into a website. Only downside so far is inconsistent rendering on different operating systems. Rendering of a slab-serif font such as Chunkfive is horrible on Windows devices… it makes the fonts look really jagged…

  • http://ixcreative.com/ Evan Jacobs

    There is something ironic about this post, considering all the fonts you use on this site are more or less standard.

  • Douglas Wollison

    Nice article, but this has been bugging me for over a year now. If you don’t want to load the local font, would it not work to just not specify a local version at all?

  • myfreeclasses

    It seems like you have very good knowledge. I would like to thanks to the admin of this website for posting these type of knowledgeable things..

    http://www.myfreeclasses.com/what-is-social-bookmarking/
    Regards,
    Lily(Admin MyFreeclasses.com)

  • Nikhilsapkota02

    Awesome fonts loved em. 

    http://www.howgood.im

  • http://techgyo.com TechGyo

    Great post! grt fonts to try out.

  • http://www.cyberdesignz.com/ Business Website Design

    Great article, it really going to help me a lot specially your various font styles, I like it.

  • http://stockfresh.com Peter / Stockfresh

    I was hesitant on using font-face for a while but the fonts on Typekit convinced me :)
    I see more and more great looking sites taking advantage of this.