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 […]

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 you: toggle fonts Use Go to a page with web fonts and click […]

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 […]