I changed my fonts after six years of using Cloud.typography
For years, I’ve used Hoefler&Co.’s webfont service, Cloud.typography, for several of my websites—including, until today, this one. I purchased Operator Mono in 2017 for my code editor and I still use it today.[1] I’ve long admired Hoefler&Co.'s work, although I was a bit bummed when they were acquired by Monotype. I used Ringside when I redesigned my website in 2019, and that has been the primary typeface on my website until today.
I’m now using fonts from the Söhne collection by Klim Type Foundry. I have a soft spot for the Swiss style, as a long-time Helvetica fan. But I didn’t make this change just for the sake of change. From the very beginning, my webfonts served from Cloud.typography produced a noticeable flash of unstyled text (FOUT), which is when a fallback system font is shown until the webfont is loaded and rendered.
This irked me, but I assumed it was part of the price of using webfonts, and I admittedly didn’t spend much time looking into it. But over the years, it became more and more annoying, and I noticed that my website, in particular, seemed to have more FOUT than other websites using webfonts. Even then, I never took the time to really look into it. Until this past week. I went to my website, saw the usual flash, and something inside of me just snapped.
The flash of unstyled text is somewhat normal in the world of webfonts, but it shouldn’t continue to happen as you browse a website because your font files should be cached by the browser. But clearly that wasn’t happening with my website.
I began looking into the problem but my web searches did not reveal much. I remembered from setting up the service that their font delivery mechanism is fairly unique and convoluted compared to the way many webfonts are delivered. Essentially, they give you a folder of CSS files to host on your own server. But they give you a link to request a CSS file from their server. That request gets some browser information and determines the optimized font file that should be used and redirects to your self-hosted version of that file.
Phew.
To make matters worse, the fonts are delivered as base64 encoded strings inside the CSS files. The performance is pretty bad and a consequence of this whole mechanism is that the browser is unable to cache the font. So as the reader moves from page to page, they will see a flash of unstyled text on each one.
I found one article about making the best of this situation to improve performance. But that wasn’t good enough for me. I was kind of over the whole thing.
My first thought was, “Well, I will just buy a license to host Ringside myself and serve it directly.” I figured it would be costly, but was shocked to find that there would be an annual fee of around $2,400. I am a believer in paying for fonts, especially when it’s supporting indie designers. But I’m not about to shell out $2,000+ per year to the largest type company in the world for a font on a personal website that gets about 1,000 page views a month.
So today I switched to using Söhne via normal self-hosted font files that are loaded directly and can be cached by the browser. I’m using Söhne for the body text, Söhne Breit for large article titles, the main navigation, and meta text like dates. Finally, I’m using Söhne Mono for code and preformatted text. I’m a sucker for the double story “g,” so I’m using the appropriate stylistic set for the body text. And for the monospaced font, I’m using the slashed zero alternate (0
) to better distinguish the numeral from the uppercase letter “O.” One more nicety is that if you are viewing my website in dark mode, I’m using the 300 weight of Söhne so that the text doesn’t feel as heavy.
Klim Type Foundry offers a reasonable pay-once license for webfonts based on the number of expected page views per month.
I still have one more website, synthwave.live, that uses fonts delivered by Cloud.typography. But I am going to source some replacements for those as well. Once I do that I will be able to cancel my Cloud.typography subscription. It’s the end of an era for me, but I’m pleased with the new look.
I have a bit of a monospaced-font-collecting problem, so I use various monospaced fonts when coding. ↩︎