HTML and CSS Reference
In-Depth Information
WEB FONTS
AS
ICONS
Another option available to you is using web fonts as icons. Using a single character
for the icons and applying a web font to them can give you the look you want. This
is a good technique in many ways. The text character will be infinitely scalable
when zooming in, and there are a wide variety of Dingbats-style fonts to use to
create suitable icons. The downsides are that browsers must support
@font-face
for them to work, font files can be big, and actually adding the character(s) into
your HTML will pollute your content and possibly cause accessibility issues for
those using screen readers.
Let's review these problems one by one. I've assembled an example for you to
dissect in the file web-font-icons.html in the chapter6 folder. To start, you'll find
your fonts using any of the resources detailed in Chapter 3. I found my fonts at
Next, you'll create the different font formats you need using the Font Squirrel
@Font-Face Generator (
www.fontsquirrel.com/fontface/generator).
Then you'll import the fonts in your CSS in the usual way using the bulletproof
font syntax:
@font-face {
: ;
: ;
: )
p
format('embedded-opentype'),
url('fonts/heydings_icons.woff') format('woff'),
url('fonts/heydings_icons.ttf') format('truetype'),
)
p
format('svg');
: ;
: ;
}
