How Advanced Web Ranking Improved M... Previous Post
Eye-Catching Videos: How the Expert... Home Comment
One of the most common requests I get from customers is to change the fonts on their site. WordPress has a very nice visual editor and it is easy to make text bold, italic, underlined, and even to change text color, but changing fonts is a bit more complicated. Unfortunately, WordPress doesn’t give users a way to change text within the visual editor. Usually to change fonts you need a developer who knows CSS to make changes to your style.css file. However, there are now plugins that allow you to change your website fonts without any programming skills.
But before we get into how the plugins work, let me explain a little bit about web fonts. There are very few standard web fonts that will render correctly on your website by default. These fonts are free and can be used on any site, but are limited to 13 fonts. They include most of the fonts you have heard of like Times New Roman and Arial. You can see the full list of them below:
If you would like to have the option of using more than these 13 fonts, but still want to use free fonts on your site, you will need to take advantage of Google Fonts. Right now Google offers over 650 fonts that you can use for free on your site and that number is growing all the time. If you are willing to pay to use the exact font you want, you can buy fonts from places like Fonts.com. Here, the cost of the font is determined by the number of visitors to your site. If you have less than 25,000 page views per month, you can go with a free plan. Most small businesses will have no problem staying under this amount, however, you have to be willing to sport their logo on your site. To remove the logo, you need to move to at least the $5/month plan.
So now, let’s talk about using plugins to change the fonts on your site.
Generally, when talking about editing fonts, there are two different ways to do it. There are some plugins, like Fonts which adds a font family dropdown to your visual editor so you can change the individual fonts within your page or post as shown here on the right. You can see there is also a new option to change font size.
However, I recommend keeping fonts consistent throughout your website, so I recommend using Easy Google Fonts. This plugin uses the standard websafe fonts and Google fonts. There are other plugins that enable you to use Google Fonts as well, but I find this one the easiest to work with.
Once you install the plugin, you can find the settings on your left hand menu under Appearance > Customize
From there you will choose Typography.
Here, the plugin allows you to choose the default font, weight, text-decoration and transform for regular paragraphs as well each of the heading types.
You will notice that it gives you the option for all the standard web fonts first and then lists all the Google fonts.
Keep in mind that when you are looking for the Google font names, they are divided by standard, serif, sans-serif, display, handwriting and monospace fonts. So if you don’t see the one you are looking for, you may simply have to scroll down to the correct category.
There are also options to change the font color, background color, margin, padding, line-height, and letter-spacing.
If you are unsure of any of these, simply leave them “as is” to leave the default of your theme.
Here is a quick video of the plugin in action:
Keep in mind that these changes might affect all the headings throughout your theme including post/page titles, widget titles, etc on all pages. Once you are done, simply click on the big blue save & publish button.
One down side of this plugin is that it doesn’t let you preview the font until you choose it. To avoid having to choose each font to see what it looks like, I recommend that you first find the fonts that you want to use at https://www.google.com/fonts. There you will be able to use the filters to narrow down those 650 fonts so they are not so overwhelming. There is also a place to type in your preview text so you can get an idea of what your title will look like in that font. Write down the fonts that you like here, and then try them on your site.
I hope you will give this plugin a try and let me know your thoughts. I’d love to hear from you.
super helpful for this tech illiterate 🙂 thanks so much
Laura Hartwig says
Glad it helped!