New Perspectives On Web Design

(C. Jardin) #1
By Marko Dugonjić CHAPTER 9

If Web fonts are self-hosted, we can subset them with FF Subsetter^58
or the aforementioned Font Squirrel. Both tools let you select and preview
characters that you require in the font, as well as remove hinting, kerning
and optional glyphs, such as old-style numerals. Even though all these
options are available, that doesn’t mean they have to be utilized. Be careful
not to cripple the font by removing punctuation, hyphens, spaces and oth-
er common non-alphabetic symbols. If the built-in kerning is removed, the
typeface will look less than satisfactory on Windows. Even the text-ren-
dering or font-kerning properties won’t know how to handle kerning
pairs properly. Clearly, we should never sacrifice the quality of rendering,
so there will be times when you’ll have to face the facts and simply use a
Web-safe font.


base64 encoding


Another way to optimize performance is to reduce the number of HTTP re-
quests by including a Web font as a Base64-encoded string in the main CSS
file. Data URIs are supported in modern browsers (IE9 and up), so you can
serve separate font files for IE8 and the predecessors, or omit Web fonts in
older browsers. Some high profile websites, like The Guardian and GOV.UK
use this method to serve their Web fonts.


@font-face {
font-family: "My Font";
src: url("data:font/opentype;base64,[base-encoded font here]");
}


Again, Font Squirrel is a great service that does all the heavy lifting for you.
It can subset and Base64-encode fonts, export all necessary font formats,
create a CSS file with fallback options for older browsers, as well as create a
sample specimen.


58 http://www.subsetter.com/

Free download pdf