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.
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!
Written exclusively for WDD by Cameron Chapman.
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!