In this tutorial you’ll learn how to change the fonts in WordPress. I’ll show you a couple of different ways you can do it, so let’s begin!
Changing the Font in WordPress
Altering the typography is a great way to change the look and feel, in fact the whole personality, of your WordPress site.
The WordPress Twenty Twenty Font Pair
In the current default theme which comes with WordPress (Twenty Twenty) you’ll see strong sans serif type used for the headings (the Inter typeface, by Rasmus Andersson) and a serif (Hoefler Text, Garamond) for the bulk of the body. It’s a simple, yet stunning font pair.
They look great, but let’s imagine we want to alter the typography in some way. The first way we might do that is directly in the CSS.
1. Edit the Theme Stylesheets
There are a couple of different ways to change the styles for a theme. The first is directly in the theme’s stylesheet.
Editing a Theme’s Stylesheet File
Navigate to your theme’s stylesheet (wp-content > themes > twentytwenty > styles.css in this example) and open it in a code editor. Make any font declaration changes you need, for example:
h1 {
font-family: "Times New Roman";
}
then save and upload the file to your web server again. You can edit styles that you find in your file, or you can add new CSS declarations.
Note: We recommend you use a child theme and edit the files on your local system before pushing to the live web server.
Editing a Theme’s Styles via the Admin
Alternatively you can edit a theme’s stylesheets via the WordPress admin. Go to Appearance > Theme editor and open the styles.css file from the file list on the right.
In both these cases you’ll find your CSS changes do work, but they’re not what we’d call best practices. Directly editing a theme file could cause problems when the theme is updated.
2. Add Styles to the Theme Customizer
An alternative approach is to add any new style declarations via the theme’s customizer. Go to Customize (available via the front end or the admin UI) and in most cases you’ll see an option Additional CSS.
Here you can add any custom styles you want.
This is an improvement on the previous methods because we’re not touching the original theme files.
Note: These styles will be theme-specific, so if you change the theme these styles won’t be adopted.
How to Load Google Fonts into WordPress
So far we’ve seen how you can change or add style declarations to WordPress, and those styles you add can certainly change the font of certain elements. However, before you do so you need to make sure that the fonts in question have actually been loaded.
Let’s add a Google font as an example. Go to https://fonts.google.com/ and select a web font you like (I’m going for Lacquer).
Use the CSS @import Declaration
By selecting the font I’ll then be given a couple of options to include it in my web pages, such as using the CSS @import declaration.
This import statement (without the <style> tags) can be added to your website using the methods we’ve discussed, so the font is loaded when the stylesheet is processed.
@import url('https://fonts.googleapis.com/css?family=Lacquer&display=swap');
Once done, we can use font-family: "Lacquer"; for whichever selectors we choose, such as the h1:
As usual there’s a caveat; using the @import statement in your CSS is again a slightly frowned upon method as it slows the loading of assets when it’s in progress.
Use the HTML Link Tag
Using the HTML options given to us by Google Fonts would be better, such as the <link> tag which we can place in our theme’s head.php file.
<link href="https://fonts.googleapis.com/css?family=Lacquer&display=swap" rel="stylesheet">
How to Load Your Own Web Fonts into WordPress
Google Fonts is a great service as it hosts the font files for you, leaving you to just link to them from within your website. But what if you purchase your own web fonts? Then you need to host them yourself, and load them into your site via CSS.
Psst: There Are Thousands of Web Fonts on Envato Elements!
Envato Elements has thousands of web fonts, all of which you can download and use with just a single subscription–sign up and check them out!
Once you’ve downloaded your font, you need to upload the files to your server, either in your theme folder, or perhaps in a new fonts folder in the wp-content folder.
Then, using a CSS @font-face declaration (which you can add somewhere, even the bottom, of your stylesheet) you reference the font files.
@font-face {
font-family: Lacquer;
src: url('https://path/to/font/lacquer.ttf');
}
That’s a @font-face declaration in its simplest form. Now you need to change the font on the element you want, just as we have done before. For more details on how @font-face works, check out this tutorial:
Recommended Way to Load Fonts Into WordPress
Having covered all these methods, there’s really only one which is 100% recommended: enqueueing. Enqueueing is a process by which assets can be loaded by WordPress in a safe (non-conflicting) and organized way, so let’s see how that works.
We have our font’s URL from Google Fonts, so we’re going to add it to our functions.php file. Again, you can do this in a code editor and edit the theme file itself, or you can do so from within the WordPress admin editor.
At the bottom of the file, add the following:
add_action('wp_enqueue_scripts', 'load_custom_fonts');
function load_custom_fonts() {
wp_enqueue_style('my_custom_fonts', 'https://fonts.googleapis.com/css?family=Lacquer&display=swap');
}
Once saved, our font will be loaded (properly) and ready for use in our CSS style changes.
3. The Easiest Method: Use a WordPress Plugin
So far our font-loading and editing methods haven’t been complicated, but perhaps aren’t the easiest way to do things for someone who has little or no coding experience. If you’d rather not touch any code at all, there’s a WordPress plugin for you: Easy Google Fonts.
Go to Plugins > Add New and search for Easy Google Fonts. When you’ve found it, install it, and then activate it.
Now, when you go to your customizer you’ll see a new Typography tab, which enables you to alter the font and all other type settings for each kind of typographic element in your website:
Conclusion
That’s how you can change the font in WordPress! Don’t forget that there are several ways to do it: some involve editing code yourself, some are more highly recommended than others, and for the most user-friendly approach there’s a WordPress plugin to do the heavy lifting for you.
No comments:
Post a Comment