You may have heard that your specially-chosen fonts could be slowing down your blog. If you have heard that, you probably have only see one alternative: the flat-out default serif that comes on everyone’s computer (Arial/Helvetica).
It makes some bloggers cringe. I get it.
They are a fine fonts, nothing wrong with them at all, they just don’t usually reflect the personality you’re looking to express. And if you’ve undergone professional branding, your designer has probably picked out some pretty personality-filled fonts specifically for your blog.
But don’t get flustered, there are alternatives. There are surprisingly attractive options built right into computers.
Some of those options are below. Now keep in mind one important thing about web-safe fonts: they will often look different on a Mac vs a PC. Most bloggers use Macs, the vast majority of visitors use PCs (as far as desktops). What you see below is the version that’s on your device. Most smartphones only have a couple font options, so most phone visitors will probably just see Arial/Helvetica or Georgia/Times.
As an example: on this site, I’m using Bodoni for my headings and Trebuchet / Lucida Grande for the body font.
Note: there is a popular pre-made set of themes for food bloggers that calls web-safe fonts “system fonts.” This is the same thing as web-safe. However, the way that theme company presents it is that you have no choice but to use Arial/Helvetica. It doesn’t have to be that way! Here are some system fonts/web-safe font options:
Web safe sans-serif fonts
Arial / Helvetica Bold UPPERCASE
We’re starting off with the default, classics here. This is what most blogs resort to when they don’t realize there is yet hope. (Again, it’s not bad, just very different from what most bloggers hope for.)
Calibri / Candara Bold UPPERCASE
The primary font here is Calibri. Most Windows machines have it, and over a third of Macs do.
Candara / Calibri Bold UPPERCASE
This is the flip of the last one, the primary font being Candara. Same as before, most Windows machines have it, and over a third of Macs do.
Century Gothic / Apple Gothic Bold UPPERCASE
This one has lots of personality. Almost all PCs have it, and the majority of Macs do too. It also looks good as headings in ALL UPPERCASE.
Consolas / Monaco Bold UPPERCASE
If you’re looking for that typewriter look (in design, called “monospace”), these are built in too!
FRANKLIN GOTHIC Bold UPPERCASE
This font is really thick, almost like it’s already bolded, which could make it great for headings.
This one is super bold and of course would be better for headings. (Heading shown in uppercase, with extra spacing between letters.)
Lucida Sans Bold UPPERCASE
This is a nice clean, wider sans-serif and it has a little more personality than Arial/Helvetica.
Optima / Segoe Bold UPPERCASE
This is one of my favorites, but it’s mostly for Macs. Optima is a really modern-looking font, with variety in the stroke weight of each letter, making it look like a custom font.
Tahoma / Verdana Bold UPPERCASE
Tahoma is very similar to the very popular Open Sans.
Trebuchet MS / Lucida Grande Bold UPPERCASE
Trebuchet is a classic-looking font that’s good for body and headings.
Verdana / Geneva
Verdana is another classic-looking font. It’s nice and wide so it’s easier to read.
Web safe serif fonts
Baskerville Bold UPPERCASE
Baskerville is a nice classic serif font.
Bodoni / Didot Bold UPPERCASE
Bodoni is one of my favorites, especially in bold for headings.
Calisto / Bookman Bold UPPERCASE
A very easy-to-read serif font.
Cambria / Georgia Bold UPPERCASE
Cambria is a pretty subtle serif, when it’s used for paragraphs, you have to look closely to tell it’s not a sans-serif, so this is a great font if you can’t decide.
Courier New / Lucida Sans Typewriter Bold UPPERCASE
This is another “typewriter” (monospace) type font, courier is a serif version, and Lucida is a sans-serif version.
Didot / Hoefler Text Bold UPPERCASE
Another one of my favorites is Didot. It’s classic with a very modern feel.
Garamond Bold UPPERCASE
Garamond is a nice basic serif font included on almost all devices.
Georgia / Times Bold UPPERCASE
These two basic serifs are also included on all devices.
Goudy Old Style / Garamond Bold UPPERCASE
Goudy has some good personality and is a great alternative to the basics.
Lucida Bright / Georgia Bold UPPERCASE
Lucida Bright is typically a Windows font, but some Macs have it. Otherwise, you’ll see Georgia.
Palatino Bold UPPERCASE
This font is on most computers. It’s another classic serif.
Perpetua / Baskerville Bold UPPERCASE
A nice serif font with almost a hand-drawn feel.
Rockwell / Courier Bold Bold UPPERCASE
These are great for headlines. In spite of being on most devices, they aren’t used very often on blogs, so they’re unique!
Unfortunately, there aren’t really any good web-safe script or cursive fonts. Windows has a decent one, but it will only show on Windows desktops, which doesn’t help. If you really want a script font for an accent font, you’ll just need to “self-host” it.
Common fonts and web-safe alternatives
- Open Sans -> Tahoma
- Lato -> Candara
- Playfair Display -> Didot (not as close of a match as others, but a very similar feel)
- Oxford -> Perpetua (a nearly exact copy)
- Montserrat -> Century Gothic (just increase the size by a pixel or two, the line height by 50% and reduce the letter spacing a tad)
Should you switch to a web-safe font?
Let’s take a step back.
What’s the point of your blog?
To serve your readers somehow, right? You help people and that’s why they like you. That’s why they make your recipes/follow your tutorials/come back to your blog.
How much do they care about your font? We care about it an awful lot as bloggers and designers, but do they? Really? Statistics and monitoring their behavior says they don’t care. At all. What else should we consider?
Google. Does Google care? Yes. Custom picked fonts can slow down your site. (Even if they’re Google fonts…ironic, right?)
My answer: yes, you should switch. It will help speed up your blog (also help with CLS), your visitors will not know the difference design-wise, and there are so many nice ones to choose from that you, the blogger, can still express some personality through one.
Font FAQs
A font that comes installed on someone’s computer.
Custom fonts (whether purchased and uploaded, from Google Fonts, Typekit, etc…) take time for your visitors browsers to load, while a font that’s already installed on their device takes no time at all.
Yes, it will fix font-related CLS issues.
The CLS issues happen because while your custom font is loading, it defaults to one that’s already on your computer. Those fonts are usually pretty different styles/shapes/sizes/spacing, so once your actual font loads, the text on the visitors computer might grow, shrink, expand or shrink in number of lines. Things will shift, which is what Cumulative Layout Shift is all about.
Here’s an example of font layout shift: 
Use a web-safe font from the beginning and this will be avoided altogether.
Pin this post so you don’t lose the instructions!
(And to help your blogging friends out too.)
Hey there to everybody! I read this article in depth. I notice different valid points in this article. It is very helpful for beginners. Thanks for finally sharing and searching this article.