Replacing Google Fonts with system fonts

Redesigning this website was a fun little project I did over the past weekend. The most exciting part was removing the need for Google Fonts and replacing them with system fonts. Google Fonts was the last Google's tentacle on this website, so it's now 100% Google free!

But why?

Using system fonts has multiple advantages:

1. No network request for fonts, so smaller size of content that needs to be downloaded.
2. Since there is no network request, there is no need to worry about "Flash of Unstyled Text."
3. Looks familiar to people since they're already used to seeing this font in their operating system.

What's needed to start using system fonts?

Since this site has been updated to use Tailwind, I'm using their default CSS rule for sans font:

.font-sans {
  font-family: system-ui, BlinkMacSystemFont, -apple-system,
               Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
               Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

I'm using another CSS rule for system fonts in code blocks:

.font-code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono",
                Menlo, Courier, monospace;
}

Those are the only CSS rules I have for fonts.

What did it look like before?

Here is what it looked like:

And this is what the same article looks like now:

What tools were used for this?

Tailwind is an excellent tool for dealing with CSS, and I highly recommend it. Using it has enabled removing whopping 1369 lines of unmaintainable CSS scattered across multiple files and replacing it with only 162 lines of really maintainable CSS contained inside one file.

Most of the elements are styled directly in the HTML and this makes me not having to worry about keeping CSS in sync with HTML all the time.

Using PurgeCSS made the bundle even smaller than the older unmaintainable version, with Tailwind included.