
Web Fonts Performance: Making Pretty, Fast - igrigorik
http://www.igvita.com/2012/09/12/web-fonts-performance-making-pretty-fast/
======
shimon_e
I have a problem with Google web fonts. Sometimes connectivity to Google is
problematic. For example in China after searching the wrong keyword all
connections to Google are blocked for 1.5 minutes. This leads to sites with
Google web fonts not hosted locally to hang in loading as it waits for a
response from Google. This has led me to hosting web fonts locally.

Was wondering if anyone has a better solution. Or if anyone from Google is
reading this, could they place web fonts on a different domain/IP and pray
that global censors don't list it?

Kinda nice to be able use cached versions of the fonts.

I only use China as an example. I have had problems with Google web fonts in
other country and on bad connections.

edit: watching the video it sounds like by hosting locally I am not taking
advantage of the different versions served to different operating systems.

~~~
igrigorik
Thanks for pointing this out, will definitely look into it. One tip is, and it
sounds like you're already using it, is to download the webfonts to your local
machine, which would avoid any future downloads. (Except, that still wouldn't
resolve the blocking of the dynamic CSS).

~~~
shimon_e
After reading your post [http://www.igvita.com/2012/06/14/debunking-
responsive-css-pe...](http://www.igvita.com/2012/06/14/debunking-responsive-
css-performance-myths/) It seems merely adding a media tag to the link tag
would prevent webkit browsers from hanging.

------
moonboots
Using a nice typeface provides an incredible boost to site design. I'm a very
happy user of Google Web Fonts (PT Sans and Ubuntu Mono) on my site
<http://typing.io>

Very small performance suggestion: minify the initial css!

~~~
wamatt
Ta, just signed up. Love the site! Wonder if it would be hard to allow users
to specify custom Github projects for typing?

Learn the style of some of the more prominent coders in a particular community
or sub-community, whatever that may be.

------
recuter
I wonder if there is a downside to letting Google act as a CDN for Web Fonts
and common javascript libraries. /tinfoil hat

Common resources distributed to browser caches everywhere is an attractive
proposition but you're also giving Google a lot of data you might not want.

~~~
TillE
Wouldn't the browser cache make that a fairly ineffective tracking method? The
odd bit of data about some websites you visit doesn't particularly benefit
Google, not nearly as much as the data you give them when you directly use
their services.

I'd be sure to keep local backups of every font and library you point to just
in case something breaks, though.

------
cantlin
Given the huge number of distinct files served by the Webfont API, I think
it's fair to have some healthy scepticism regarding the client-side caching
benefits this article emphasises. While I can count on all you MBP-wielding,
startup-cruising hackers to be primed with Open Serif, I'm less confident
about the corporate desk jockeys who are my real users. Worth noting too that
using fonts because they are widely distributed is more or less exactly what
we have been trying to get away from. Still, font subsets are awesome,
especially if you only need alphanumeric latin characters. For example:

    
    
        <link rel="stylesheet" href="
          http://fonts.googleapis.com/css?family=Droid%20Serif
          &text=abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890.,
        " />
    

...sends Chrome back a minuscule 8.5K worth of font. Glorious!

------
michaelpinto
Amen on the very last line "web fonts are here to stay". I'm amazed that in
2012 I'm still working with developers who act like it's something we may want
to try next year. It's time to realize that this is a technology that should
have taken off ten years ago and now it's time to play catch up.

~~~
repsilat
Not to be contrary, but why should any user not disable web fonts if they can?
Unless they're being used as a set of custom vector icons (a la Wingdings), I
can't see any real downsides. Without web fonts you never have to deal with
the world's worst typography, your pages load faster etc etc...

Are we putting up with a worse user experience to gratify some self-absorbed
designers? Is this all about letting them properly execute their "grand
vision"?

~~~
sukuriant
I was thinking the same thing, really. In most cases, I like my pages to look
about the same. I like my font some generic, seen-everywhere san serif font, I
like my monospace a standard monospace. I have no problems with other fonts
existing, but I could easily see some people that do, and would change
everything around. For them, there'll be a Firefox (or other) extension
that'll turn it off.

The valid reasons I could see for a downvote for you are:

* asking a question that doesn't further the use of web fonts for their own end --- which seems to be the focus of the article

* calling designers "self-absorbed" and implying that novel fonts/etc creates worse user experience.

~~~
repsilat
GP here, and yeah - downvotes for tone and for going off-topic are probably
deserved.

The mainstream browser devs have a clear remit to faithfully implement specs
as standardised, and to support new and upcoming features as best they can.
Mozilla in particular has a vision of just about _everything_ moving to the
web, so they're not going to do anything to limit the platform. Things like
user preferences, browser extensions and bookmarklets are another field
altogether, though, and users should make the web work to their liking as long
as they're legally and technically able to.

------
humpolec
>Next, the font file size can be further reduced by eliminating font hinting
meta data, as some platforms do not support it.

Not sure if I understood that correctly... do we make the decision depending
on the platform, or do we remove the hinting data _for all platforms_ just to
improve the compression?

~~~
igrigorik
Poor wording on my part. Font hinting meta data is removed for platforms that
do not support it. Ex: windows does, and hinting data is retained for improved
rendering.

~~~
ralph
How good is the platform detection accuracy? I ask because for goo.gl I see
analytics with the + suffix plump for many "Other Unix" when the majority of
those would have been Linux.

------
aliks
Please not use Google web-font is slower and harm you privacy.

[Google fonts] 43ms -> [------>] DNS 120ms -> [-------] [----->] Get Css 150ms
-> [----------------] [---------->] Get-rel woff font

Proof: <http://fonts.googleapis.com/css?family=Skranji> \-->
[http://themes.googleusercontent.com/static/fonts/skranji/v1/...](http://themes.googleusercontent.com/static/fonts/skranji/v1/Rkre06NW1995RvIlAXa7Ng.woff)

Use font squire and convert to base64_font -> better faster stronger

~~~
slurgfest
Although this is hard to understand, it is interesting enough to clarify. Font
Squirrel has an option, when you go to the 'Font-Face Generator' and use
'Expert mode,' to generate a base64-encoded font which can be included in the
CSS. This can significantly increase the size of your CSS, but it can reduce
the number of HTTP requests involved.

------
ori_b
As an end user, I set my font to what it is for a reason. Please don't mess
with my settings.

~~~
notatoad
As a web designer, i set my font to what it is for a reason. please don't mess
with my settings.

------
newman314
Side question: can HTML5 storage be used to store the downloaded fonts so as
to prevent a reload should the cache be blown out at some point?

Or is this not even worth considering?

~~~
igrigorik
Yes, you could definitely do that. A good example would be an offline app..
Having said that, in a recent turn of events, iOS 5.x+ decided to make
localStorage non-persistent... Ugh.

~~~
sukuriant
So ... what's the good of local storage, then...?

------
barlog
this is the Fastest way. make a move!

------
tonetheman
oooooh font pron.... dat ascender.

------
ConstantineXVI
I thought of an evil hack w/ web fonts the other day. Seems it'd be fairly
simple to use randomly re-sorted fonts (where characters are mapped to
improper code points) as a kind of one-time-pad to jam HTML scrapers or
surveillance of the line. The user's browser would get the appropriate font
and be able to read the text; anyone reading the raw HTML would get gibberish,
forcing anyone trying to extract the data to use OCR. Obviously this would
kill your site for search engines, screen readers, etc., so the only use would
be if you're seriously paranoid about your data getting scraped, and only then
if the scraper had limited resources (the NSA, etc. can probably spare a few
cycles for OCR).

~~~
mistercow
That wouldn't be a one-time pad. It would be a substitution cipher.
Substitution ciphers are extremely simple to break.

I don't think there is any way to implement an actual OTP with a font, but you
could use the font as a code book, where each character in the cipher text
goes to a random unique code point, with the font duplicating each character
many times.

