While at the most recent performance.now() conference, I had a little chat with Andy Davies about fonts and he mentioned it’d be cool if, while subsetting, you can easily create a second subset file that contains all the “rejects”. All the characters that were not included in the initially desired subset. And as the flight […]

This is part 4 of an ongoing study of web font file sizes, subsetting, and file sizes of the subsets. I used the collection of freely available web fonts that is Google Fonts. In part 1 I wondered How many bytes is “normal” for a web font by studying all regular fonts, meaning no bolds, […]

I’ve been crafting a nice font-face fallback, something like this: @font-face { font-family: fallback; src: local(‘Helvetica Neue’); ascent-override: 85%; descent-override: 19.5%; line-gap-override: 0%; size-adjust: 106.74%; } It works well, however Safari doesn’t yet support ascent-override, descent-override, nor line-gap-override in @font-face blocks. It does support size-adjust though. Since my code requires all 4, the results with […]

TL;DR: If your variable font file is significantly larger than 35K you may ask yourself “How did I get here?” Two font files (of the same family) means more bytes than one variable font that does both For context see part 1 and part 2. After publishing part 2 of my ongoing web fonts file […]

The zebra jumps quickly over a fence, vexed by a lazy ox. Eden tries to alter soft stone near it. Tall giants often need to rest, and open roads invite no pause. Some long lines appear there. In bright cold night, stars drift, and people watch them. A few near doors step out. Much light […]

Earlier this year I wondered how many KB is “normal” for a web font file size (spoiler 20-ish KB). I finished the post questioning how much subsetting really helps, meaning how much do you save from painstakingly choosing which characters should stay in the subset as opposed to just broad strokes (ASCII vs Latin vs […]

This is a different version of a font on/off toggler bookmarklet. I did one such bookmarklet earlier this year, which works by messing up font-family inside @font-face. This new version works my messing up url() inside @font-face blocks. By “messing up” I mean changing the string “woff” to “woof” which means making the font files […]

TL;DR: If your font file is significantly larger than 20K you may ask yourself “How did I get here?”. For images I think we (web developers) have a sense of how many bytes we can expect an image we see on a page to be. A JPEG photo? 100-ish K is ok for a decent […]

Update: a different version that supports the use of local() is now available Ever wanted to look at your page and turn Web Fonts on and off? Experience the layout shift repeatedly, like some sort of UX torture? Look no further, here comes the handy bookmarklet. Install Drag this link to a bookmark toolbar near […]

TL;DR: /* WRONG */ .huh { font-family: Helvetica Neue, Helvetica, Arial; } /* OK */ .huh { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; } Exhibit 1: Bing search Yeah, I use Bing search, shut up! Check this out, the ugly Times New Roman font to the right where it says Rewards: Definitely not what the […]

I’ve been trying to stay away from webfonts as much as I can. IMO they are not worth the performance complications. Font loaders, FOUT, yadda-yadda. But… it happens. Story time While showing off another one of my music theory exercises to my prof, he mentioned it would be nice to be able to tell v […]

Since my previous post on @font-face and gzipping, Paul Irish has asked (and so has @KLTF) what about WOFF? WOFF is a newer format with built in compression and ability to store meta data. So I took this stnf2woff utility and converted all the TTF and OTF files from my previous tests to WOFF. Below […]

Adding custom fancy fonts to a web page seems to be all the rage these days. Looking at some examples with Net panel on, I saw some of those font files are 100K which is a pretty big price to pay for an ornament like this. I mean you can build whole pages, with fancy […]