How I (almost) fixed my fonts

posted: 2020-12-05
modified: 2021-02-09

This site goes through CSS changes daily. Yes, daily. I can't stop changing the CSS. It's gotten to the point where I focus more on the CSS of this site than, evidently, writing posts for it.

I like web fonts. But I also like simplicity and straightforwardness. Sadly, getting webfonts and CSS to work together flawlessly is no simple task.

Google Fonts

At first I just used Google Fonts: click, click, right click, copy, paste @import URL. Done. Fixed. …or so I thought.

Using Google fonts has the unfortunate side-effect that I now depend on a 3rd-party CDN for my site to look nice. That CDN is obviously Google - that's not ideal for me.

Self-hosting Google Fonts

So I decided to just host the fonts on this webserver. I came across this gem: google-webfonts-helper. You choose your Google fonts, it generates a zip file containing the font files, and some CSS to put on your page. Perfect! …or so I thought.

Inline stylesheets

Wait. Now my fonts flash for a second. Oh, this is the fabled FOUT I've been hearing about. Google Fonts didn't seem to have this issue, though I suppose their server is far more responsive than mine, and they do some CDN tricks or something. Here's a CSS-Tricks article I read: https://css-tricks.com/how-to-load-fonts-in-a-way-that-fights-fout-and-makes-lighthouse-happy/. I don't recall whether it helped me in this endeavour or not since the solution requires JavaScript (eugh).

I decided to just inline the stylesheet to fetch the fonts and apply them since it took the browser a bit extra to download styles.css and since the fonts would be loaded with the webpage it shouldn't look to bad. I added font-display: fallback for some extra peace of mind.

@font-face {
    font-family: 'Charter Regular';
    font-style: normal;
    font-weight: normal;
    font-display: fallback;
    src: local('Charter Regular'),          local('Charter-Regular'),
         url('/fonts/charter_regular.woff') format('woff'),     /* Modern Browsers */
         url('/fonts/charter_regular.ttf')  format('truetype'); /* Safari, Android, iOS */
}

@font-face {
    font-family: 'Charter Regular';
    font-style: normal;
    font-weight: bold;
    font-display: fallback;
    src: local('Charter Bold'),          local('Charter-Bold'),
         url('/fonts/charter_bold.woff') format('woff'),     /* Modern Browsers */
         url('/fonts/charter_bold.ttf')  format('truetype'); /* Safari, Android, iOS */
}

html, body {
    font-family: "Charter Regular", "Times New Roman", serif;
}

This still didn't give the desired result. There were still weird loading times and odd font flashes.

The fix (sort of… not really)

I give up.

html, body {
    font-family: sans-serif;
}

Chances are whenever you're reading this the site has already been changed to reflect this change.
Sans-serif looks better for this site anyways :P