When I last rebuilt erica-schultz.com back in 2012, I decided to incorporate a custom webfont in my Design and Judaica sections. In the interest of cross-browser compatibility, I used FontSquirrel’s free Webfont Generator to export EOT, SVG, and WOFF files, which I then called in my CSS @font-face declaration.

Fast forward to late 2016: I discovered that while my font still looked nice in Safari, it had stopped working in Chrome and Firefox. They had apparently gone and changed their font rendering in a way that broke my site. THANKS DUDES.

This week, I finally did a little research into the issue. 

First I checked to see if there were any new formats I needed to know. Indeed, it turns out there’s a new version of WOFF called WOFF2, designed for better compression results. So OK, I went back to FontSquirrel, re-exported my webfont package, and added the WOFF2 to my site assets and CSS.

Nothing. Hm.

I poked around a little more and found this: “After digging a little deeper, it looks like Firefox now has a “same domain” restriction; that is, the font file must be hosted at the same domain as the web page in which the font is loaded.”

Now my font files were, in fact, hosted locally, but in my CSS file I had specified the locations as complete URLs. I changed them to relative URLs, reloaded, and voilà! Firefox had my font back!

Chrome still showed the broken font, though. Why? Well, of course, it was a caching issue. When I opened it in an incognito window, it finally came up correctly. Pro tip: Always do a hard refresh when reloading isn’t enough.

So now that it’s back: what’s the custom font? Back in 2007, I paid Fontifier $9 to make a webfont out of my own handwriting. (The price has apparently not gone up in 10 years, so it’s still a bargain.) You fill out their template, scan and upload it, and it digitizes the characters and returns a TrueType font. To improve the final product, I invested some time in a few extra rounds of revision: previewing my results and adjusting my scan in Photoshop to get the heights and baselines as consistent as possible. It’s still not perfect — individual letters written in isolation will almost always come out looking different from the letters you write together in a flow — but it’s pretty good. If you like it too, you can grab the .TTF that I’ve made available as a free download from my website: EricasHandwriting.ttf.