You don't need custom fonts…
I must admit that the title is little clickbait, but if you are not a designer with a huge typography culture and needs, you can simplify your life and still have plenty designs possiblities by using only standard fonts. By standard font, I mean fonts that are massively installed on computers.
Yes, you can avoid issues like : FOUC, FOIT, render blocking, multiple font formats, multiple files for font variants, webperf issues, browser compatibilities…
Modern Font Stacks
Modern Font Stacks is a website that did the awful job to find the closest font stack for more than fifteen styles like : System-UI, Serif, Old Style, Handwriting, Monospace,…
No matter the operating system, the result will not be identical, but it looks almost the same. It’s as simple as that, here is a Gif showing the difference of the Transitional style :
As I said previously: «it’s not identical», but for somebody that doesn’t have keen eye on fonts stuff it does a pretty good job… There are lots of comparisons gif on the project Github page if you want to take a glance at other styles !
A small real life experiment
I have a fairly simple website that uses the Caladea font family and I wanted to see if I can replace it with a Modern Font Stacks solution. And it turned out like this :
If you look at the zoomed image, you’ll notice some differences of course, the font-weight differs a little, some characters are bigger, but to my eyes nothing too noticeable.
The main difference is that by removing the font I was able to strip around 45ko of data on the page weight for almost the same result.
Conclusion
I’m nobody to order you to stop using custom font on your website, you’re free to do what you want. But if you want to lighten your website and use custom fonts, using a Modern Font Stacks proposed font stack is a nice really way to go. It’s easy to use on your site and it works for almost for every user without any major drawbacks.
Not bad if you ask me…