Having nice fancy fonts can definitely make your website look better. However, you need to be careful when using Google Fonts because they can add a lot of weight to your pages if not implemented properly. I will talk about proper Google Font implementation and if you even need them for a simple font. The default fonts that most modern browsers support are just fine. So consider these factors if you really need Google Fonts for your blog.
What Are Google Fonts?
You can find Google Fonts here:
You notice that when you download Google Fonts, they come with a lot of files. There are many variations of each font based on how bold you want it. This is great as you can pick and choose the ones that you want. I will talk about the issues with the variations later. For now, I just want to give a short introduction about them.
Google Fonts Are Fonts That Give You More Options Outside the Default Fonts
Google Fonts are nice because they give you more options over the standard web safe fonts. These are also called system fonts because they are fonts that the system already provides by default.
Here is a list of web safe/system fonts:
The list of default fonts are small, but if you are concerned with page speed like many of us are, then you should consider using one of these default fonts. You can always use Google Fonts and optimize them, but if you like one of the default fonts, then you can save yourself the trouble of having to deal with Google Fonts. There is always a compromise involved. The fancier a website is, the more assets like CSS and JS you need. This is why it is always a decision if things are a necessity or not. I say, if you are getting traffic and results, then all of this extra fluff can be skipped.
Google Fonts Require Loading an External Stylesheet and Font Files
When you use Google Fonts, you have to load an external stylesheet that points to several font files. Then you have different font formats that you need for full browser support. You can see that there are many font file formats. This is why many people do not care to fully support every single browser, especially Internet Explorer. Several years ago, when we had to deal with browser compatibility, there was no true standard. It was really messy back then. Now browser compatibility has been replaced with responsive design. At least with responsive design, we have CSS media queries and standard width breakpoints rather than strange coding practices just to make IE look good.
Anyway, since Chrome still has about 66% of the current browser share market, if your fonts work for Chrome, you should pretty much be set for both Safari and Firefox. The good thing about browser compatibility today, is that you do not have to spend so much time on it anymore like you used to.
Just think about all of those different files that you need to load just to get a Google Font to work. The individual files are small but they can add up if you need this format and that format. I just do not like the fact of having to load all of them for a small percentage of users on an old outdated browser.
Why Are Google Fonts Important?
Google Fonts are important because without them, we would have the same boring fonts on every website. When we used to read newspapers, all of the fonts looked the same. Newspapers were using serif fonts like Courier or Times New Roman.
Google Fonts Give Your Website a Distinct Look and Personality
If you come up with a unique combination of fonts for your website, you can really make a good impression when people land on it. Images, fonts, and color are one of the first things that people see on your website. They will notice those things before your menus and your body text. So having the right set of fonts can really keep your users’ eyes on your page long enough to interact with it
Why Are Google Fonts a Problem?
Google Fonts can be problematic because you have to sacrifice speed for visuals. I have already said this but when you think about not only all of the different font file formats but also the variations in the font itself, you have a lot of files that you might end up loading on the page. Be selective and choose only the ones that you need.
Google Fonts Having Too Many Variations: Different Bold Weights and Italic Variations
Depending on which fonts you decide to go with, you will see that there are many bold and italic variations. Some fonts like to combine all bold and italic variations together. Then you get tons of font files that you may not need.
Loading Too Many Google Font Variations Increase Page Load Time
All of these fonts not only take up server space but increase page load time too. Both of these can be issues if you run an image-heavy blog. The good news is that once you have chosen your fonts, you will not need anymore after that. Typically, two fonts are the best and I will explain why in the next section.
Only Use Two Different Fonts: Heading and Body Content
This applies to any fonts, Google or web safe. I just want to be clear on this because the previous sections were only about Google Fonts. If you forgo Google Fonts, then just choose one web safe font for your headings and another for your body text. Why? For simplicity’s sake really. You need your pages to be easy to read and understand. Depending on your design, I feel that san-serif fonts are in general better than serif fonts. I feel that serif fonts are too complicated with the extra parts at the edges. San-serif fonts are good if you are going for a classical or historical look.
Otherwise, just stick with san-serif fonts because they clean and most people print over handwrite because handwriting is too fancy and looks like serif fonts. Printing is indicative of serif fonts.
What If I Use Too Many Google Fonts?
I just mentioned that two fonts are enoughs. Each font has a purpose, one font for heading and one font for the body. When you read and article those are really the only types of text that you need. Headings are used to organize and section off the paragraphs in your article. The following sections will discuss why having several fonts on a page is just strange and weird.
Adding Even Heavier Loads That Decrease Page Speed
I already mentioned how Google Fonts add load to the page. Adding load to the page means slower page load times. This is why we become so critical of adding weight where it is not needed. If we do decide to add weight, it has to be optimized in order to reduce that weight as much as possible.
Page Design Has No Order or Organization
Too many fonts in general strips a page of its order and organization. Unless these additional fonts serve a particular purpose, it would be hard to advocate adding more fonts to a page when unneeded. A specific case for introducing new fonts would be if you are creating a call-to-action that you really want to stand out from the rest of the page and has some kind of theme to it. The case for another font beyond the two is really rare and I feel like that you should not even have to think about doing this.
What Does Each Font Represent if Too Many Are Used?
This refers to the previous paragraph, each font has to represent a specific part of the page. If a font is just thrown out there just to make the page look snazzy then it serves no purpose. Adding more fonts with no purpose makes no sense.
An Example of Too Many Fonts: Think About Too Many Colors
Think about a website that has too many colors. Most websites have a color scheme that consists of a few colors. These colors must not only be complementary to each other but offer good contrast for things like hover states.
What if you use too many colors? For one, I think that your eyes will hurt. Adding too many colors to a color scheme will make your eyes strain and squint, which is painful. This is especially true if your colors clash and do not match. I still use websites that use poor color contrast. This means that everything is hard to read and people will not like this. This ruins the user experience and people are most likely to leave your website.
So just like having too many colors that make no sense, having too many fonts is just the same.
Do Websites Really Need Google Fonts?
If you really think about it, websites can get by with just the default fonts. Fonts are just one part of a website. You also have design, navigational elements, colors, images, etc. So if you take a holistic look at the entire website, fonts are just one part of the design. If you know CSS, there are so many CSS properties that can make even default fonts look good. You have bold, italics and uppercase. You also have letter spacing and line height. So you can use these to your advantage to make system fonts look good.
What About Simple Blogs?
Simple blogs that are just mainly text and images can survive without Google Fonts. This will make your life easier so that we can all focus on the articles and try to get them on Google. Really, if I had to choose spending more time worrying about fonts or a search engine. I would spend more time thinking about the search engine. Once you have two good default fonts you are set.
How to Optimize Google Fonts If You Choose to Use Them
Optimizing Google Fonts are necessary if you see them being flagged in a page speed test. The solution involves preloading the fonts so that they are loaded with higher priority at page load.
Also make sure that you set display to swap so that a default font is used to temporarily display your content while your Google Fonts are being fetched. This is why having at least one other font listed when using font-family in CSS is important. You still need your content to show on your page even if your Google Font is not yet ready because it takes too long to load. This is what display swap does.
Preload Google Fonts Before Using Them
As mentioned before, preloading Google Fonts is important so that you can balance having nice fonts with fast page speed. However, if you do not want to bother with Google Fonts, then you just stick with default fonts. If you do not want to deal with technical stuff, you can try an optimization plugin that handles preloading Google Fonts for you.
Google Fonts are really nice to have but they have some caveats that you should be aware of when using them. Google fonts can come in several font file formats and bold and italic variations. When you combine these different formats and variations together, you can end up loading a lot of font files that you might not even need.
This is why I suggest that you might consider using just the default web safe fonts that work in most modern browsers. You really do not need Google Fonts for your website, you can get by without them. If you do use them however, then make sure that you optimize them via preloading.