Tải bản đầy đủ - 0 (trang)
Introducing Boot.getFont: A Fast and Tiny Web Font Loader

Introducing Boot.getFont: A Fast and Tiny Web Font Loader

Tải bản đầy đủ - 0trang

// Font-specific

Boot.getFont({ path: "http://mycdn.com/fonts/{f}/{f}-wf" }, "futura" );

I haven’t had time to document all the goods, but the library is available here if you are


• Development: boot.getfont.js (https://raw.github.com/artzstudio/Boot/master/src/


• Production: boot.getfont.min.js (https://raw.github.com/artzstudio/Boot/master/


Gentlefonts, Start Your Engines!

Now that you’re armed with the knowledge needed to ensure fast-loading fonts, take

a look at the performance of the implementation options.

I set up the following test pages, loading the same web font (Open Sans), spanning DIY

and various hosting options at Typekit and Google:

• System: Our control test; this page does not load any fonts and uses Arial.

• FontSquirrel Optimal: FontSquirrel generator’s recommended Optimal setting and

FontSpring’s cross-browser @fontface declaration (http://www.fontspring.com/

blog/the-new-bulletproof-font-face-syntax/). Fonts hosted on the same server as the

web page like most small websites.

• FontSquirrel Expert: Used recommended tips above (http://www.artzstudio.com/


ommended-expert-settings) to trim font file size using the FontSquirrel Generator,

I replaced the Optimal font kit in the above test with a minimal Basic Latin character


• FontSquirrel Expert (CDN): Same as the above test, however fonts are hosted from

a CDN on a different domain.

• Boot.getFont: This test updated the “FontSquirrel Expert” test to use my Boot.get

Font JavaScript library.

• Boot.getFont (CDN): Same as Boot.getFont test, except font files are hosted from

a CDN on a different domain.

• Google Web Fonts Standard: I chose Google to represent a free font hosting service,

and since this is a speed test, and Google is all about speed, I figured they should

be in the race. Google provides three implementation options, this being the default

—a element pointing to a dynamic stylesheet that loads the font(s). Note:

I left out the Import option as results were nearly identical to Standard option.

• Google Web Fonts JavaScript: This option includes the WebFont loader discussed

earlier to load the fonts, hosted from Google’s servers.

186 | Chapter 33: Web Font Performance: Weighing @font-face Options and Alternatives


• Typekit: Here, I created a kit at Typekit and used the options that provided the

smallest font file.

I used http://webpagetest.org/ and loaded each test page 10 times in Chrome, Firefox 7,

IE7, IE8, and IE9 over a 1.5 mbps DSL connection. We are comparing implementation,

so I took the fastest test to weed out network latency issues and other causes of variance

in the data.

Figure 33-4 shows how they stack up, ranked by the fastest time (ms) across browsers.

Figure 33-4. Fastest Load Times (ms) by Implementation and Browser

Take some time to digest the data. To better compare implementations across browsers,

check out the charts on Figure 33-5 (IE9), Figure 33-6 (IE8), Figure 33-7 (IE7), Figure 33-8 (Firefox), and Figure 33-9 (Chrome).

Gentlefonts, Start Your Engines! | 187


Figure 33-5. Font Implementation Benchmarks: Internet Explorer 9

Figure 33-6. Font Implementation Benchmarks: Internet Explorer 8

188 | Chapter 33: Web Font Performance: Weighing @font-face Options and Alternatives


Figure 33-7. Font Implementation Benchmarks: Internet Explorer 7

Figure 33-8. Font Implementation Benchmarks: Firefox

Gentlefonts, Start Your Engines! | 189


Figure 33-9. Font Implementation Benchmarks: Chrome

My Observations

The Do-It-Yourself implementations were consistently the fastest, especially when

combined with a CDN. This is due to physics—less bytes, requests, and CPU overhead

are required to serve the font.

It is interesting to compare Google Web Fonts (GWF) to Typekit since they use the

same core loader, but that is where the similarities end (Figure 33-10, Figure 33-11).

Figure 33-10. Google Web Fonts in Firefox (1254ms): JS→CSS→Font

Figure 33-11. Typekit in Firefox (795ms): JS » CSS Data URIs

In browsers that support them, Typekit uses Data URIs in the CSS (http://www.webpa

getest.org/result/111231_2K_2PNEM/10/details/) to load the font, whereas GWF first

190 | Chapter 33: Web Font Performance: Weighing @font-face Options and Alternatives


loads the JS, then the CSS, and finally the font (http://www.webpagetest.org/result/

111231_13_2PNDW/9/details/). Typekit uses this approach in IE 8 and lower (http://

www.webpagetest.org/result/111231_QZ_2PNEG/4/details/) where Data URIs are not

supported, ending up with slower load times in those browsers. Google is also slower

because of their multiple DNS lookups; Typekit rightly uses one domain for all assets.

I was impressed by the performance of Boot.getFont, which ended up being faster

(sometimes by a hair, sometimes more) than the standard @font-face CSS in all cases.

My hypothesis is that somehow the JS triggers a reflow/repaint that forces the fonts to

download sooner in all browsers.

Final Thoughts

While this article could probably be split into several, I wanted a single place to document implementation choices, tips for optimizing them, and have some reference

benchmarks. If other font providers want to hook me up with a free account (and host

Open Sans, for consistency), I’d be happy to include them in another study at another


I was again dissappointed to see Google turn out another (http://www.artzstudio.com/

2011/06/googles-button-is-slow-and-so-is-facebooks/) slow service. Google friends, take

some notes from Typekit!

I am looking forward to hearing your thoughts and observations on this experiment,

and to your recommendations for speeding up web fonts. Thanks for reading!

To comment on this chapter, please visit http://www.artzstudio.com/


tives/. Originally published on Feb 27, 2012.

Final Thoughts | 191




The animal on the cover of Web Performance Daybook Volume 2 is a Sugar Squirrel

Biak Glider. The squirrel glider (Petaurus norfolcensis) is a nocturnal gliding possum,

not to be confused with the flying squirrel. The flying squirrel of North America is a

placental mammal, while the squirrel glider is a marsupial.

Squirrel gliders are native to the range from the South Australian and Victorian Border

through southeast Australia, where they inhabit dry forest and woodlands, to northern

Queensland, where they inhabit a wetter eucalypt forest. These wrist-winged gliders

make their home in hollowed out trees, lining their dens with leaves. Typically, they

live in groups of one male, two females, and offspring.

The squirrel glider’s diet consists predominantly of insects and fruit, followed up by

tree sap of the Eucalypt and Red Bloodwood variety, pollen, nectar, leaves, and bark.

Squirrel gliders have bushy tails comparable to the ring tail possum, and use it as an

extra limb to wrap around branches to hold on.

The cover font is Adobe ITC Garamond. The text font is Linotype Birka; the heading

font is Adobe Myriad Condensed; and the code font is LucasFont’s TheSansMonoCondensed.



Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Introducing Boot.getFont: A Fast and Tiny Web Font Loader

Tải bản đầy đủ ngay(0 tr)