Typography is one of the most important elements in web design and plays a vital role in your branding. Learn about how you can customize the fonts in your WordPress site!
If you’re looking to change the font on your WordPress website to pattern it to your branding, some may feel that it’s not a very straightforward process and may need some additional steps.
Here are various ways to change the font of your website, you can use any method depending on what you’re comfortable with doing.
Changing Fonts Using the Customizer
The typography settings in the WordPress Theme Customizer will vary depending on what theme you’re using. Some may have an extensive font library, while others like the default themes that come with WordPress, may not have typography settings at all.
To check whether your theme comes with typography options, you can try going into the Customizer. The Customizer can be accessed by following these steps:
- On your WordPress dashboard, hover over Appearance and click Customize.
- In the left panel, look for any font styling or typography settings. For example, in the WordPress theme Blocksy, they have integrated Google Fonts into their options:
Changing Fonts Manually via Additional CSS
You can use the Additional CSS settings in the Core section of the WordPress Theme Customizer to configure the typography settings in your website.
This can be located at the bottom of the menu panel in the theme customizer.
If you’re not familiar with using CSS, you can read more about CSS font properties here. The advantage of using CSS is that you can alter the typography globally or to specific sections of your site only. Here’s an example of a CSS syntax that will change the font settings of the whole body of your website:
body {
font-family: "Calisto MT", "Bookman Old Style", Bookman, "Goudy Old Style", Garamond, "Hoefler Text", "Bitstream Charter", Georgia, serif;
font-size: 16px;
}
If you’re wondering, the long list of font families I’ve used above is what you call a web safe font stack. Web safe font stacks are lists of font families which look similar. If your visitor’s browser doesn’t have one of the fonts, then it will try the next one, until it finds one that’s present in the visitor’s system. Kinsta has an amazing list of different web safe font stacks that you can use.
You can use Google Fonts using this method, but it requires some additional work to get them working correctly. First, head over to the Google Fonts page and pick one that you would want to use.
Select the style you prefer by clicking the “+ Select this style” button.
A modal will appear where you could download the font locally or use it for web. To use it for your WordPress website, select the @import option. Then paste these codes to the Additional CSS section in the customizer.
Your code should end up looking like this:
@import url('https://fonts.googleapis.com/css2family=Roboto:wght@100&display=swap');
body {
font-family: 'Roboto', sans-serif;
}
Changing Fonts using Plugins
There are a variety of plugins available on the WordPress plugin directory that can help you customize the fonts on your website.
Fonts Plugin
Fonts Plugin claims to be the #1 font plugin on WordPress. It is a subscription-based product with a font library that consists of 1000+ fonts and has various font styling options. Additionally, this lets you change the font within the WordPress block editor, in case you want to style the sections of your website differently.
Easy Google Fonts
Easy Google Fonts by Titanium Themes is a free plugin that integrates Google fonts into your WordPress theme without the need for you to code yourself. It works well with any WordPress theme and has over 600+ fonts to choose from.
Typekit Fonts for WordPress
Typekit Fonts is a great companion if you prefer using CSS to change the font of your website. It is a subscription-based plugin that gives you access to their font library. It works similarly to the Google font library–you can import typekit fonts into your website by adding it to your CSS.
Changing Fonts using Block Collection Plugins
Since the introduction of Gutenberg, there have been many Gutenberg block add-ons that have advanced font styling options. Thanks to these block plugins, you have the freedom to style your website’s typography however you want! These include Stackable, Kadence Blocks, GenerateBlocks, and more.
Here’s a peak of how we, Stackable, give you complete control over styling your website’s typography
Recap
There are multiple ways to change the typography for your website. Depending on what you know, or what your website needs, there is a perfect solution for you!
Here are the three different ways you can customize your website’s typography:
Disclaimer: This article contains affiliate links to products. We may receive a commission for purchases made through these links.
Wao! Such an informative article. I am a content writer and your information about Gutenberg Editor is so helpful for me. It is also great for all beginners.
Thank you so much for sharing these amazing step-by-step details.
We’re glad you enjoyed reading this article and find it helpful!