Fonts and Rights
Some fonts aren’t free. As with stock photography or other copyrighted material, you
are expected to comply with the rights and licenses of the material you use on your
website. If you purchase a font, you’re usually within your rights to use it in your
logo and images on your pages. These are called usage rights. However, the @font-face
approach brings a different kind of licensing into play—redistribution rights.When you embed a font on your page, your users will have to download that font,
meaning your site is now distributing the font to others. You need to be absolutely
positive the fonts you’re using on your pages allow for this type of usage.Adobe’s Typekit has a large library of licensed fonts available, with tools and code
that make it easy to bring these fonts into your website.a Typekit isn’t a free service,
but it’s quite affordable if you need to use a specific font.Google provides the Google Font API,b which is similar to Typekit but contains only
open source fonts.Both of these services use JavaScript to load the fonts, so you’ll need to ensure that
your content is easy to read for users without JavaScript.As long as you remember to treat fonts like any other asset, you shouldn’t run into
problems.a. http://www.typekit.com/
b. http://code.google.com/apis/webfonts/css3_fonts/stylesheets/style.css
@font-face{
font-family:'GarogierRegular';
src:url('fonts/garogier_unhinted-webfont.eot?#iefix')
format('embedded-opentype'),
url('fonts/garogier_unhinted-webfont.woff')format('woff'),
url('fonts/garogier_unhinted-webfont.ttf')format('truetype'),
url('fonts/garogier_unhinted-webfont.svg#garogierregular')format('svg');
font-weight:normal;
font-style:normal;
}We’re defining the font family first, giving it a name, and then supplying the
font sources. We’ll put the Embedded OpenType version first so that Internet
Explorer 8 sees it right away, and then we’ll provide the other sources. A
user’s browser is going to just keep trying sources until it finds one that
works.The ?#iefix' prefix on the .eot file fixes a nasty parsing bug in Internet Explorer
- Without that markup, IE 8 would generate 404 errors as it tried to parse
Chapter 8. Eye Candy • 166
Download from Wow! eBook <www.wowebook.com> report erratum • discuss