Comment by iMark | Hacker News Reader

Comment by iMark | Hacker News Reader

I'm interested in the technique suggested for font loading. As an exercise I just created a font containing a single character at zero width. The resulting file size is considerably smaller than Blank (1440 bytes, versus 80k) which makes it nicer to inline, but should be able to serve the same purpose for font loading:

Create a span containing the character, with the font family referring to the font being loaded and the empty font (inlined in the css) and when the width is non-zero the font is loaded.

the generalized form of this technique (which you can also use to see if somebody has a font installed locally) is to basically create two rules:

    .load-base { font-family: comicsans-ms, verdana; }
    .load-test { font-family: fancyfont, comicsans-ms, verdana; }

and periodically check that the width of a line of nonsense text for both classes is not the same. Blank has the obvious benefit that it will be obvious when 0 != something else, but you can do it if you have some reasonable expectation that some other common font will exist with different metrics than your fancy font.

interesting to see the process behind the font, though.

As you say, if you know that the font you're loading has different metrics this approach will work, but if you have to make that sort of assumption it's not a generalised approach.

If you know that one font has zero width dimensions and one does not, then it greatly simplifies matters.

Reply on news.ycombinator.com