One of the most exciting developments on the web of the last several years is web fonts. No longer are you restricted to the same 13 or so webfonts distributed with both Microsoft Windows and Apple’s Mac OS X. A whole new world of web typography has opened up!
First, I’ll show you how to implement them. There are a few different formats, but the main ones are:
- .eot (Embedded Open Type — used exclusively by Internet Explorer)
- .ttf (TrueType Format — mainly a fall back format for older non-Microsoft browsers)
- .woff (Web Open Font Format — A new format made standard by the World Wide Web Consortium, or W3C)
- .woff2 (Web Open Font Format 2.0 — The newest version of .woff with improved compression, but not supported by all browsers yet)
- .svg (Scaleable Vector Graphics — Not a font format, per se, but used by Apple’s iOS devices, though they are moving to .woff and .woff2 support)
Serving face
You can serve the fonts up yourself, provided the font you want to use is properly licensed, and you have the space and bandwidth necessary to host these files. To do this, you would upload the font files to your site, usually in a folder called fonts. Then, in your CSS file, you simply import the font files, then define their usage. For example, let’s say I want to use Droid Sans, a free font available from Google Fonts. I would upload the font files to my fonts/ directory, then call them in my css:
@font-face {
font-family: 'Droid Sans';
src: url('../fonts/droid-sans-webfont.eot');
src: url('../fonts/droid-sans-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/droid-sans-webfont.woff2') format('woff2'),
url('../fonts/droid-sans-webfont.woff') format('woff'),
url('../fonts/droid-sans-webfont.ttf') format('truetype'),
url('../fonts/droid-sans-webfont.svg#droid_sans') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Droid Sans';
src: url('../fonts/droid-sans-bold-webfont.eot');
src: url('../fonts/droid-sans-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/droid-sans-bold-webfont.woff2') format('woff2'),
url('../fonts/droid-sans-bold-webfont.woff') format('woff'),
url('../fonts/droid-sans-bold-webfont.ttf') format('truetype'),
url('../fonts/droid-sans-bold-webfont.svg#droid_sans') format('svg');
font-weight: bold;
font-style: normal;
}
Then it’s just a matter of implementing the font as part of your font stack in your css tags and classes:
body {
font-family: 'Droid Sans',Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: 16px;
}
Using a font service
There are several different web font services available, but I’m only going to talk about a few. Only a few are available free of charge, while the majority of them have varying costs.
Google Fonts
Google Fonts has a wide selection of free and free-to-use fonts available for use, hosted on their servers. Google was first to the table with free font love, and they’re still one of the best services out there. It’s incredibly easy to implement Google Fonts, adding only one line of code to the <head> section of your page.
Adobe Edge Fonts
Not to be outdone by Google, Adobe has their own set of free-to-use fonts available to web designers at Adobe Edge Web Fonts. Also easy to implement, Adobe takes it a step further by integrating Edge Web Fonts with its Creative Cloud applications, namely Adobe Dreamweaver, Adobe Edge Inspect, Adobe Edge Code, and Adobe Edge Animate, thereby making it even easier to use web fonts.
Adobe Typekit
Typekit is Adobe’s premium webfont service, offering several thousand webfonts from their own library, as well as partner font foundries.
Cloud.typography
The folks at the Hoefler & Co font foundry also started their own web font service called Cloud.typography, offering all of their premium and well known fonts for use on the web. Some of the most noteable fonts available are Gotham (you might know it as the Obama font), Didot, and Hoefler Text.
Conclusion
Whichever way you choose to use webfonts, you should still follow good design practices and exercise restraint, limiting yourself to no more than two font families on a page. Besides adding load-time to your site, using more fonts on your page will make it look incoherent, sophomoric, and will result in font soup. And no one enjoys font soup.