I went to design a header, the other day, and I discovered that many of the fonts I had previously installed on my computer had disappeared, somehow. I still had the files, so all was not lost, but I figured that I would use this discovery as an “opportunity” to revisit what I know about fonts, as well as make sure that everything is restored and tidy, on my computer. I wanted to share some tips and tricks, with you.
You might think, “Oh, it’s okay. I don’t need to know much about fonts, because Google Fonts is all I need”…
Unfortunately, there are things to consider that you might not know about, unless you’ve already dived deep into the world of fonts, like me. For example, many designers would recommend that you disable Google Fonts on your website because:
a) It will fry your brain, trying to sort through the massive list of them (without live examples) on your Divi theme and it’s just not worth it
b) The file for Google fonts is super massive and heavy. The use of it is likely to slow down your website, causing issues in the background, with editing, as well as with uploading speed.
c) Nobody needs that kind of stress in their lives.
d) I’m trying to remember the other point that I had, but the first three should really be enough to make you reconsider. Seriously.
What is recommended, instead of using Google Fonts, is to find 2-3 fonts that you like (and that harmonize together), install them onto your computer, as well as your WordPress website, and use those.
Re: styling, I usually choose one sort of fun, script (display) font for the website title, a plainer one, that goes with it, for the site description, and MAYBE a third plain one, i.e. a basic serif or sans serif font.
You might notice that even some of the serif and sans serif fonts have a bit of extra style and are considered display fonts. It’s good to have options, right?
That being said, don’t go crazy with 2+ stylized display fonts, because there’s a fine line between classy and trashy. Less is more. Choose one display font that you love. There are many to choose from, so the chances are that one will really call to your heart and say, “Pick me!!!”.
Where to find your fonts?
There are two places that I usually go, when I’m hunting for fonts. They’re equally fab, but have slightly different user interfaces. Here are my thoughts on each of them:
Font Squirrel
- Pretty much all of the fonts that are downloadable directly on their site are available for commercial use, so that’s super handy. Beware of ones that are available off-site.
- The licensing details are available, but you have to do a little digging for them.
- There’s a search bar that you can use, to look for a particular font, but it can be a tad squirrely, as in it’s so live that it might start searching, before you’ve had the chance to fully type in your entry.
- It’s easy to download the fonts.
- You can search by font type, i.e. script -> formal
1001fonts.com
- It’s super easy to see if a font is available for personal use (a red dollar sign) or commercial use (a green dollar sign).
- 1001fonts.com suggests other fonts that you may not have been aware of, when searching for a particular font for your collection. Why do I say collection, when I suggested earlier that you stick to 2-3 fonts for your website? Well, if you do website design or graphic design for long enough, you’ll establish a collection of fonts, because each company has its own unique vibe, or personality, let’s say. Therefore, each website has its own unique personality and requires the appropriate fonts to reflect said personality. I have about 50 display fonts and 30 sort of plain fonts, in my collection.
- You can pop in your own text, i.e. the name of your website, to see how it looks in a particular font. The only thing is that it can get a little confusing, between the two input fields, so you have to keep them straight. Use one on the top of the website if you want to search for a particular font. Use the one lower down, if you want to see how your text looks, with that font.
- As you can see in the screenshot, below, the 1001fonts.com website is a bit more cluttered with ads. That’s kind of what you get, these days, when going to a website where many things are free.
Which Font Website is Better?
I definitely prefer the more centered and composed look of Font Squirrel, to be honest. Now, if we could combine 1001fonts.com’s functionality with fontsquirrel.com’s more streamlined appearance and soothing color scheme, we’d for sure have a winner! Who wants to put that website together? Any takers?
Purchasing Fonts
Fonts say so many things. They can really help set the tone and vibe of your website. If you don’t find the exact font you want, for free, it may be worth looking at what you can buy. There’s a whole world of fonts available for purchase. Creating fonts is an art form, in and of itself, which many designers are taking advantage of. I found a cool script font that I hadn’t seen before, on Font Squirrel, but it was only available off-site. That particular font was free, but it led me to a website where the designer highlighted fonts that he had for sale, as well. There’s one called “lavender”, which I think is particularly beautiful, and I love how he had it displayed. I don’t have the budget to pay $28 for a font, at this time, but maybe I’ll put it on the wish list.
Don’t Worry…I Will Be Walking My Talk
Also, in case you’re wondering about the rather plain fonts that I have on my website, I have not yet really selected the ones that I’m going to use, yet. I plan to go through all of the ones that I cultivated, yesterday, and see which ones harmonize together and feel right, for the tone of my website…which is still sort of revealing itself to me. It’s a process. In the meantime, I’m using two of the super basic fonts that were leftover, after I disabled Google Fonts.
Going Down the Font Rabbit Hole…
I use both 1001fonts.com and fontsquirrel.com, all-the-time, and have them open in two different tabs, side-by-side, when I’m doing my deep font research. And I’m not kidding about that. I spent an entire day cataloguing all of my fonts and making sure they each were free for commercial use (I discovered two that weren’t – sad face), they were organized in a way that made sense to me, in my files, and that they were downloaded to my computer. It was one of the more intense days that I’ve spent, in a while. I thought I was going to go to the gym, early in the day. That never happened, because I went down the font rabbit hole. So, be careful, if you go exploring in the world of fonts. I am creating some more extensive font resources that will make things easier, of course. Those will be available, in the near future, when I get my subscription software up-and-running.
Disabling Google Fonts
If you’re working with Divi, you will need to disable Google Fonts in your Divi Theme Option settings. Fortunately, that’s as easy as pushing a button. What you’ll be left with is a handful of super basic fonts. Trust me, that’s better than the seemingly thousands (okay, 915, at the moment) of Google Fonts, which can make your head spin. Clarity is good. Simplicity is even better.
If you’re not using Divi (and I don’t know why you wouldn’t, because it’s amazing), your theme may or may not grant you the ability to enable/disable Google Fonts with the click of a button. If you’re lucky, it won’t even HAVE Google Fonts…so problem solved, right? Here’s a plugin that has been tested with select WordPress themes. Maybe it will work for you? If not, I imagine there are other options available. It might be worth checking out this article with three different options, based on your skill level. The beginner level plugin that the author mentions, called “Autoptimize”, sounds appealing on many levels.
Getting Set Up with Your Fonts
Once you’ve checked the licensing on your selected fonts, downloaded them, organized them in your files, and installed them on your computer (I know…it sounds like a lot of work, but it’s not “hard”), you should be able to find the fonts in your Microsoft Office programs and Paint.net. From there, you can use them to create graphics and documents. Once you have them installed on your website, you can set them for your headers and regular text.
I know. It does seem like a lot of work. It’s an investment of time, up-front, but it can save you a lot of frustration, because without the bulk of Google Fonts on your website, your uploading speed will be faster and other functions will benefit from your having cleared that clutter.
Maybe some other time, I’ll go deeper into the mechanics of it all. For now, I need to tend to my body temple. Time for a walk.
Love & Blessings!
Claire Amber, Fired Up Diva