3 ms·
Web font preloading for HTML5 games
- mozumder 10y agoOr just use Data URIs embedded in the CSS font face.
- adiabatty 10y agoThat must be less efficient than not base64ing, though. Wikipedia says everything takes up 4/3 as much space in base64 if I'm reading it right. Is that really such a good idea?
- michaelbuckbee 10y agoThe theory is that you get to skip what would otherwise be sequential http connections of: 1. Download the CSS 2. Parse CSS for font URLs 3. Download Fonts Which depending on a bunch of factors (caching, network latency, bandwidth, etc.) may or may not be faster overall and also may differ per client. The article also clued me into something I hadn't realized: apparently FF only downloads the font from an @font-face declaration when it determines it will actually be used. This is a very smart bandwidth optimization but probably also makes the delay worse.
- mozumder 10y agoIf you're serving gzipped CSS, the size is recovered.
- zx2c4 10y agoUnless you're comparing gzipped CSS (base64, I mean) to a gzipped font file, in which case, the size isn't recovered. zx2c4@thinkpad ~ $ gzip Ovo-Regular.ttf zx2c4@thinkpad ~ $ stat Ovo-Regular.ttf.gz File: 'Ovo-Regular.ttf.gz' Size: 23903 zx2c4@thinkpad ~ $ base64 Ovo-Regular.ttf > Ovo-Regular.ttf.b64 zx2c4@thinkpad ~ $ gzip Ovo-Regular.ttf.b64 zx2c4@thinkpad ~ $ stat Ovo-Regular.ttf.b64.gz File: 'Ovo-Regular.ttf.b64.gz' Size: 34746