HTML and CSS Reference
In-Depth Information
Chapter 5
Embedding Web Fonts
For many years, web designers—frustrated by the narrow range of web-safe fonts—have been demanding the
ability to embed different fonts in their web pages. It's hard to believe, but Internet Explorer (IE) 4 was the first
browser to support embedded fonts way back in 1997. Two main factors prevented other browsers from following
suit: IE used a proprietary technology for web fonts; and font foundries were concerned about fonts being
downloaded and reused without paying license fees.
The situation began to change rapidly after 2008-2009, when all major browsers finally offered support for
CSS
@font-face
rules that specify the location of font files. This sparked the creation of many new fonts designed
specifically for embedding in web pages. At the same time, font foundries began to relax their attitude toward
embedded fonts. Not every font is available for embedding in web pages, but you now have a much wider range
to choose from.
In this chapter, you'll learn about the following:
•
Which font formats are necessary for cross-browser compatibility
•
Checking whether a font's license allows it to be used in a website
@font-face
•
How to specify the location of font files with
•
Specifying bold and italic fonts
•
Restricting the range of characters downloaded by the browser
•
How to adjust the relative size of fallback fonts
Using web fonts rather than images for text has several advantages, the most important being that it makes
the text content immediately accessible to assistive technology for the blind and search engines. If the text needs
to be changed, you just change it in the HTML rather than creating a new image.
Adding Web Fonts to Your Sites
To add nonstandard fonts to your web pages: you can either use a font hosting service to deliver the fonts from a
content distribution network (CDN), or you can store the font files on your own web server.
Most fonts are protected by copyright, so you can't upload font files to your website without first checking
the license and seeing if there are any restrictions on its use. Even if you have paid for a font, you cannot assume that
you have the right to use it in a website. It might be restricted to use on your local computer. Having said that,
there are hundreds of fonts that you can use—and many of them are available free of charge.
Using a Font Hosting Service
Font hosting services, such as Typekit (
https://typekit.com/
), Fontdeck (
http://fontdeck.com/
)
, WebINK
(
www.extensis.com/en/WebINK
), and Google web fonts (
www.google.com/webfonts
)
, offer a wide range of web
