Fixing Broken Web Fonts on Ghost
Troubleshooting Webfonts on Ghost
We use a couple custom fonts on the blog, defining them using the CSS
@font-face directives. One font was worked fine, but the other consistently failed to show up.
What the WOFF?
For the font that didn’t work, the browser received a 303 redirect to the same URI, but with a trailing slash. The font that worked was served just fine.
It turned out the “broken” font was in WOFF format, and the one that worked was in WOFF2 format. This wouldn’t normally make any difference, but something was definitely odd. Our blog is hosted on Ghost.io too, so troubleshooting options were limited.
Tricksy MIME Types
solution workaround turned out to be really simple:
Rename the broken font’s extension from
.woff2, and fix the paths in the CSS.
I’m not sure exactly why this works. Maybe it’s to do with Ghost’s routing rules – or maybe it’s the fault of Ghost’s CDN. Either way, hopefully this solves you some head-scratching if your fonts aren’t working as you expect.