News for hackers. Stuff that matters.

A comment on Show HN: Download and inline Google web fonts from the command-line.

Re:Show HN: Download and inline Google web fonts from the co... by mmastrac on Saturday December 27, 2014 @12:16PM (#8803151)
I've been fighting the flash of invisible content problem while using Google's web fonts on Safari, so I bit the bullet and built a command-line tool that would both 1) host them locally and 2) inline the woff version that's supported by most modern browsers as a data: URL.

You can install this via:

    npm install -g webfont-dl
And download a set of fonts like so:

    webfont-dl "http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic|Raleway:500" \
      -o css/font.css
[ Parent | on HN ]
Re:Show HN: Download and inline Google web fonts from the co... by deanclatworthy on Saturday December 27, 2014 @02:48PM (#8803683)
Is it really so that inline fonts avoids the flash? I have not read this anywhere until now. Source?
[ Parent | on HN ]
Re:Show HN: Download and inline Google web fonts from the co... by mmastrac on Saturday December 27, 2014 @02:56PM (#8803716)
It avoids the flash by effectively blocking load. It's not documented, but you can infer it:

  - CSS blocks rendering until download [1]
  - Inlining a font in CSS makes it part of the CSS
  - Fonts inlined in CSS block rendering until download
You can get a similar effect by using a webfont loader and hiding the body until the font loads. The utility uses a strong name for downloading font resources, so if you want to go down this road and use a long expiry for the font resources that'll work as well.

[1] https://developers.google.com/web/fundamentals/performance/c...

[ Parent | on HN ]
Re:Show HN: Download and inline Google web fonts from the co... by deanclatworthy on Saturday December 27, 2014 @03:07PM (#8803752)
I was aware of the technique of hiding the body, but that for me is unacceptable. It causes further delays to get content on the page. This inlining of the fonts is quite interesting.

It'd be nice to have a way of clients caching webfonts. Fonts could have a signature (checksum) and loaded from the user cache.

[ Parent | on HN ]