Did you know that you that you can use web safe fonts with the Big Themes? By using web safe fonts you can improve your page load speed. The only catch is there are far fewer choices of fonts to choose from and your choices are inconsistent. Your visitors will only have access to certain fonts based on the operating system and the browser that they are using.
Assumptions
You should understand how caching and CDNs work before reading this article.
Google CDN
Using the Google CDN means that Google stores your fonts in its content delivery network.
The Google content delivery network is the primary way that you can display fonts with the Big Themes. It’s a great way to load your fonts because it gives you tons of choices, loads fast, and it is easy to maintain and update. However, it will almost never be as fast as using web safe fonts.
Hosting Fonts Locally
Hosting fonts locally means that your fonts are stored on the same server as the rest of your site, then they are proliferated to your CDN if have one.
There does not appear to be any meaningful performance improvement when hosting fonts locally. In some instances, you may see that your CDN loads fonts slightly faster than Google’s CDN, but in other instances you may notice that Google is faster. In either case, the performance difference is likely to be trivial, but hosting fonts locally requires you to install your fonts onto your website which is sometimes tricky and adds bloat to your site, then if you want to update your fonts, you need to delete your old fonts, then install your new fonts. And ultimately, the only difference is you’re using your own CDN instead of Google’s CDN. And if you don’t use a CDN, then your fonts are almost certain to slow down your page load speed in comparison to using Google’s CDN.
Bearing that in mind, there are some reasons that you may want to host your fonts locally, but this article is about web safe fonts. You can read about hosting fonts locally on my main blog.
Web Safe Fonts
Web safe fonts are fonts that are hosted by your visitor’s operating system or browser.
Using web safe fonts will speed up your page load regardless of whether you were hosting your fonts through your own CDN, or off of your local server, or off of Google’s CDN. When you use web safe fonts, you are creating a list of fonts called a font stack, and when your visitor’s page has loaded onto their browser, your website loads the first font on the list that is available in the user’s browser or operating system.
A Demo of a Web Safe Font Stack for the Big Themes
If you want to use a web safe font stack, then you should look up different web safe fonts on the internet. However, it can be difficult to find a stack of fonts that you think looks good and looks similar to each other.
The following is a sample stack of quality fonts that look pretty similar over a wide range of devices. All you have to do is copy and paste this into the Additional CSS section of the customizer:
/*Title Fonts*/
.site-title, .bb-site-title-top,
.bb-forest-cover h1,
.bb-forest-cover h2,
.bb-forest-cover h3 {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif !important;
}
/*Heading Fonts*/
h1, h2, h3, h4, h5, h6, .site-description, .bb-site-description-top {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif !important;
}
/*Paragraph Fonts*/
body,
p, pre, textarea, .comment-author, .entry-content li, .wp-block-latest-posts,
.entry-meta,
.entry-footer,
.nav-links,
.comment-metadata,
.reply,
input,
select,
optgroup,
.bb-sideStick li,
#bb-sideSlide li {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif !important;
}
/*Menu fonts*/
#primary-menu li,
#bb-sidebar-menu li {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif !important;
}If you like the way this looks, then if you are using one of the latest Big Themes, all you have to do is go into the Typography section and delete everything (including white space) from the input areas of the font sections. Once you have done that, the Google CDN will no longer be called.
You can also do a search for web safe fonts and see what other options are available to you.
Questions about Web Safe Fonts?
If you have any questions, then please post them in the comments section.