The simplest way to add beautiful fonts to your website is Google Fonts. This post will give you instructions on how to use Google Fonts in WordPress without messing with inserting code into your header or your CSS file.
This post may contain affiliate links. I may earn a small commission from purchases made through them, at no additional cost to you. Please see my Disclosure Policy for more details.
Why Should I Use Google Fonts for my WordPress Site?
Google Fonts are free and open source. Free is not always good, but in this case, it is. Currently, you have access to 973 font families, with categories to include serif, sans serif, display, handwriting, and monospace. That’s a lot of options for free! Plus, open source means that you have the ability to use these free fonts for any project, whether personal or commercial.
Additionally, using Google Fonts on your WordPress site will help keep your website running faster. The fonts are running on Google’s servers, rather than your own, meaning they won’t take up your server’s resources.
Google Fonts are not only for websites, but they can also be downloaded and used for print or even your online marketing, such as social media images. So, if you had any need for print collateral that tied in with your blogging business or a Pinterest image for one of your posts, you could easily use the same fonts to keep your branding consistent.
How to Use Google Fonts Using Astra
Do you have a premium WordPress theme? There is a chance that your theme already has Google fonts already built into the theme customizer. Take the time to delve deeper into what your theme offers. You might be surprised at what you find out your theme is capable of.
I use Astra Pro for my theme. Additionally, the Astra theme offers a free version of their theme, which also has Google fonts available in the theme customizer. Here I will explain how to customize the typography for Astra.
From your WordPress dashboard, navigate to Appearance > Customize > Global > Typography.
From here, you can choose Base Typography or Headings.
Base Typography
The Base Typography section will allow you to customize the typography for all your body and content text.
Family: Select the Google font family for your body and content text here. As you can see, I selected Open Sans.
Variants: Choose the variants you want to use on your website body and content text. Typically, I use Normal 400 with my body font, but I’ve also selected Bold 700 for those instances when I bold text. Choosing variants is important because instead of all the variants loading from Google, only the two I need will load, which helps keep your WordPress site a little bit more speedy.
Size: Enter the font size you want for your body and content text.
Weight: Set the default weight of your font for all body and content text here.
Text Transform: Text transform gives you the option of Default, None, Capitalize, Uppercase, and Lowercase.
Line Height: Select your line height here, which is how much space is between each line of your body and content text.
Paragraph Margin Bottom: Last, choose your default paragraph margin bottom.
Headings
The Headings section allows you to personalize the font for your all headings on your WordPress site.
Family: Select the Google font family for all your headings here. As you can see, I selected Source Sans Pro.
Variants: Choose the variants you want for your headings. I use only Bold 700 for my headings, so that’s all I chose. Again, choosing variants is important because instead of all the variants loading from Google, only the one I need will load, which will help speed up my site.
Weight: Set the default weight of your font for all heading text here.
Text Transform: Text transform gives you the option of Inherit, None, Capitalize, Uppercase, and Lowercase for all headings on your WordPress site.
Heading 1 – 6: Here you can choose the font size for each specific heading.
How to Add Google Fonts to WordPress Using a Plugin
Another easy way to use Google Fonts on your WordPress site is with a plugin.
From your WordPress Dashboard, head to Plugins > Add New. Search for Google Fonts Typography.
Install and activate Google Fonts Typography.
Now go to Appearance > Customize > Google Fonts. The first two options are Basic Settings and Advanced Settings.
Basic Settings is a great way to change one or two fonts on your entire WordPress site.
Advanced Settings enables you to custom every font element of your website individually.
Google Fonts Typography is a free plugin and offers more features if you upgrade to their pro version. Personally, I’ve only used their free version, and I would recommend investing in a premium theme that offers Google fonts rather than purchasing a Google font plugin.
Pingback: 17 Free Best Handwriting Fonts • Blog There