Web Fonts Performance: Making Pretty, Fast | Hacker News Reader

Web Fonts Performance: Making Pretty, Fast

igvita.com

68 pointsigrigorik51 comments

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.

Google and Typekit released a javascript project called web font loader[1] that allows custom fallback logic. You can add custom code that loads self-hosted fonts if Google is timing out. To generate the fonts on your server, you can download the original fonts[2] and run them through FontSquirrel's Font-Face Generator[3]. This provides some of the optimization benefits that Ilya mentions in his blog post.

[1] https://github.com/typekit/webfontloader [2] http://code.google.com/p/googlefontdirectory/ [3] http://www.fontsquirrel.com/fontface/generator

Wow thanks! I'd recommend this as default practice.

Could you not mirror the fonts from Google?

No as they need 30+ variants of the fonts to support everything right now and Google customizes them on the basis of user agent.

Hopefully in the future it will be a lot more simpler.

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).

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

Thanks. Glad that Google developers talk their time to read comments here. :D

I'm reading your blog and wow it is very useful. Guess you are the guy to look into such issue.

BTW, the hang seems to be caused by the block of the dynamic css.

The article seems to suggest that with fonts.googleapis.com, the font is served from common domain and cached for 1-year (by default). So, all sites using the same font inclusion logic may have to load from cache quickly. Am I missing anything here?

The fonts themselves are cached. The CSS is cached for 24 hours to allow them to point to a new versions of the font.

This css file stops the parser till it is loaded and when connectivity to Google is an issue it hangs the loading of sites. See http://www.igvita.com/2012/06/14/debunking-responsive-css-pe...

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!

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.

Thank you! I have been looking for that website for years!

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.

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.

With Google Analytics, AdSense and DoubleClick, Google already has tags on 88.4% of all web domains.

http://knowprivacy.org/

It would be nice if we could develop a way of caching the same file across different domains.

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!

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.

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"?

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.

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.

I would just like to remind downvoters of this comment that a downvote is not a way of disagreeing with someone. This comment is part of a debate about a web technology. It's not a troll or a personal attack, so I think it's perfectly valid, don't you?

Why should any user not disable CSS if they can?

good typography is a quality user experience. and yes bad typography makes for a bad user experience. but the idea of not having any choices is like going back to the C64 -- at that point why not get rid of those pesky lower case letters? and do you need any other color besides black and green?

This is the philosophy we need. Thank you.

Too many sites still use custom fonts at small viewports...

Now the device might be connected to a fast WiFi network, or it might be connected via GRPS or EDGE.

The later case makes the user experience painful if someone has to wait for the fonts before they can see the content.

Generally one can see content whether or not fonts have been loaded. You might have noticed websites showing one font after load and then very quickly changing font.

Depends on how the font is packaged.

If the font is packaged as a dataURI in CSS then browsers wait for the CSS to be downloaded before rendering the page to prevent FOUC

>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?

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.

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.

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/...

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

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.

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

Browsers have an option to keep your font choice over the choice of the web designer. For example in Firefox it's Options->Content->Advanced (the one on the Fonts&Colors section not the other one)->uncheck "Allow pages to choose their own fonts".

As an end user who set a font, you are the <1%.

I am too, but let's face facts, it's not a normal thing to do.

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

As an end user, I can keep web designers from messing with my settings.

As a setting, i wish i could keep everyone from messing with me.

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?

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.

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

Why waste general-purpose storage on data browsers can already cache in various ways? The farthest I'd go is an offline manifest.

this is the Fastest way. make a move!

oooooh font pron.... dat ascender.

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).

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.

That's silly. Simple frequency analysis would defeat this, no OCR required.

Strength of "encryption" notwithstanding, it was a fun exercise: https://github.com/simonratner/fontcrypt

Perhaps of some use to those annoying coupon code sites that go to great lengths to prevent copying of the coupon code in order to funnel users through their affiliate link. [Edit: To be an inconvenience to scrapers, you'd want to generate a random font per session.]

Reply on news.ycombinator.com