HTML and CSS Reference
In-Depth Information
Embedded OpenType
Apropos web font fragmentation and our Google web font example for Oxygen (Listing 4-14), Embedded OpenType
(EOT) font files are used in the Microsoft browser, Internet Explorer. Making the request to our stylesheet from an IE
browser will yield the following response from Google:
@font-face {
font-family: 'Oxygen';
font-style: normal;
font-weight: 400;
RuRdwqUdkfYP0fpTfyGHiA.eot
') format('embedded-opentype'),
RzoNiRR1p2Mqyyz2RwqSMw.woff
'
) format('woff');
}
Google is handling Internet Explorer browsers by supplying them with EOT files, as well as through the newly
adopted WOFF format for later browsers. This is a great way to show you that you'll need to often supply multiple
fonts depending on your target audience.
Using SVG with Fonts
Let's have a last look at SVG; specifically, at serving an SVG file as a font character sheet. We still rely on SVG fonts
because older versions of mobile Safari (on the iPhone and iPad) accept only this file format. But SVG fonts aren't
really a font format as you've just learned; they're just instructions for font glyph outlines represented as standard
SVG elements and attributes. You may think that including all the glyphs is fine, but what if you need just 10 of them
and not all 200? This is one of the biggest difficulties related to using SVG as a font for the Web. EOT and WOFF have
compression built into the font format; it allows for quick transfer and download times. By the spec's very nature,
however, SVG fonts are uncompressed and pretty large, especially for mobile use. Another issue with SVG is that
certain font files contain information on how certain characters will be used together. This information gets lost when
the font gets converted to SVG. Lost, too, are important metadata information about how to layout certain ligatures,
special characters, leading, and kerning. Mobile Safari has adopted the soon-to-be standard WOFF format starting at
mobile Safari version 5, however for Android user's you'll need to supply TTF or SVG formats.
Font Squirrel
You may be thinking, “It's pretty ridiculous that I have to remember the syntax for web fonts, not to mention how to
generate the different file formats, as well as which browsers support which formats.” We'll I'm here to tell you that
a very good tool to bookmark is Font Squirrel for web font creation (
fontsquirrel.com/fontface/generator
)
Font
Squirrel allows developers to upload a font file to their user interface; the free service handles the conversion process
to the other formats, as well as providing you with rock-solid CSS syntax for use within your creative. To get a detailed
understanding of how Font Squirrel generates its code, look at Paul Irish's blog on the font face implementation syntax
When using this free service, you'll find that some fonts you try to upload will be blacklisted to prohibit
conversions. You need to have the licensing terms in place to perform this action; so consider exploring alternative
avenues. This brings us to the topic of web font licensing.
