Do you want to change fonts in WordPress but have no idea how to? Don’t worry! Here is a complete guide for you so that you can easily change the fonts of your desire in WordPress.
In the design of your website, fonts are crucial. They create the general tone for the design and aesthetic, and they have the power to improve or detract from how it looks and feels. You’ll need to understand how to update the font sets you’ve selected for your website.
In WordPress, there are numerous options to modify the font. What kind of theme you pick, whether you’ll need a plugin, and whether you want to manually add them all depend on how you update them. We’ll go over each technique and demonstrate how to do it with WordPress in this post. Let’s get going.
What Are Web Fonts?
Google, Adobe, and Font Space, among others, offer web fonts. They enable you to alter the style of your website by allowing you to insert fonts. Web fonts, as opposed to desktop fonts, are kept on the cloud.
Web fonts are dynamically retrieved from the font provider when a visitor arrives at your website. When properly optimized, they appear on your website in a matter of seconds.
Using multiple fonts without having to embed them into your website is quick and simple with web fonts.
Types Of Web Fonts
Serif:
Because of its embellishments, which are typically seen at the top and bottom of each letter, serif fonts are typically only appropriate for usage on headings.
Sans Serif:
As an alternative, as they are crisp and simple to read, Sans Serif fonts can be used for both headers and body text.
Script:
Because of their whimsical appearance, script typefaces should normally be used sparingly.
Display:
Lastly, since display fonts tend to be big and chunky, they should only be used sparingly for headers and never for body text.
Using Web Fonts In WordPress
WordPress supports web fonts in a few different ways. Whether your theme is a full site editing block theme, a generic WordPress theme, or a theme that employs a theme builder, you can integrate them manually, with the help of a plugin, or using the theme’s settings.
Because Google Fonts are open source and simple to integrate, developers will frequently use them in WordPress.
How To Change Fonts In WordPress
There are numerous ways to modify the typefaces in WordPress. There is a built-in font manager with Google Fonts Already installed in certain premium themes, such as Divi.
If you want every Google font subset to be used, Divi also gives you the option to enable them all in the theme options.
You can alter the theme’s default fonts in various other themes besides Divi by using the customizer settings. The number of fonts that can be used using this technique may be constrained depending on the subject.
You can include them in the theme.json file if you use block themes with full site editing(FSE), such as Twenty Twenty-Two.
Additionally, you can utilize the Gutenberg block editor or install a font manager plugin. The last option: is manual.
Using The Theme Customizer Options To Change Fonts In WordPress
Depending on your theme, you have a few options when utilizing the WordPress theme customizer. We’ll use the Genesis theme as an example to alter the default typeface.
Connect to your WordPress dashboard. Choose Personalize from the Appearance menu.
Custom WordPress Theme
- Click Typography when the customizer screen appears. There Will be two choices, including Add Typography and Font Manager.
- Click the first choice to open the drop-down menu. From there, you may browse the selection or do a search for a particular font to use on your website.
- After selecting a font, add it to your website by clicking the Add Font button.
- Repeat the procedure to add other fonts that can be allocated to specific elements.
The second choice, Typography Manager, enables you to designate newly added fonts to various parts of your website.
You can include them in the body, site title, site description, menu items, headings, and other areas in our example.
You may also change the typefaces from here.
- Choose the target element for which you want to modify the font first.
- Choose the font family next.
- Choose the desired text alterations as well as the font weight.
- Choose the font’s size, weight, line height, and letter spacing after that.
- When you see fit, repeat the procedure for the additional elements.
Changing Fonts Using WordPress Full Site Editing
The majority of full-site editor themes come preloaded with a selection of fonts. You can alter the typefaces in the theme editor for themes like Blockbase, Emulsion, Aino, and TwentyTwenty-Two.
We’ll use the Blockbase theme as an illustration. Go to Theme > Editor to change fonts.
Aino Font Theme Change
- At the top right corner of your screen, click the style symbol to continue.
- WordPress FSE font customization
- Change the typeface for your theme by clicking the typography section after that.
- keyboard typography
- You can alter the text for your website and the link text in our example.
To view your available font options, select the drop-down menu under “font family.” Choose the font you want to use. The font size, line height, and appearance can all be customized.
To save your changes after making a choice, click the save button in the top right corner of the page.
Change Fonts In WordPress With Block Editor
You can modify the look of your typefaces with the block editor. You can alter the color of the text and its backdrop, as well as its size and appearance.
The font-weight option in the appearance menu typically depends on the font you’ve selected in your theme’s settings.
- More choices are available in text blocks.
- You can alter the orientation of your text and add bold or italics.
- Block editor settings for text modules
- There are extra options for your text, including the ability to strike through it, add inline code and images, and highlight it.
- Finally, you can include both subscript and superscript characters.
Change Fonts In WordPress Using A Plugin
As was already indicated, changing the fonts in WordPress requires the assistance of a plugin, such as Fonts Plugin|Google Fonts Typography.
We’ll go over how to set up the plugin, how to alter the fonts on your website while using it, and how to install it.
- Go to Plugins > Add New to begin. Use the search bar to look for Fonts Plugin | Google Fonts Typography.
- To add the plugin to your website, click Install Now.
- Install Google Fonts for typography
- Activate the plugin next.
- Turn on the plugin.
- Go to Appearance > Customize to access the plugin. A Section called Fonts Plugin will be added to your customizer when the page reloads.
Plugin Settings
- There are four menu options available after clicking the tab, including basic settings, advanced settings, font loading, and debugging.
- You can select a default font family from more than 1400 Google font alternatives using the basic settings. Also, you can customize the font for headings, buttons, and input fields.
- Your site title and tagline can be changed to a different typeface using Advanced Options. You can alter the site’s navigation menus’ font under navigation settings.
- Plugin for fonts advanced settings
- You can alter the body text’s font as well as the font used for each heading element individually under the Content Typography section.
- altering the typography and fonts
- You can alter the fonts used in the sidebar and footer of your website using the Sidebar and Footer tabs, which include both heading and content topography.
You can find the cause of your fonts not loading by turning the force styles checkbox under Debugging. There is also a checkbox for removing the font controls from specific posts and pages and disabling editor controls.
You have four options for font-display: swap, block, fallback, and optional. You can do all of your plugin modifications by clicking the Reset All Fonts Option.
Using The Divi Theme Builder To Change Fonts
One of the most potent theme builders in the world is called Divi. With Divi, there are a ton of options when it comes to adjusting the fonts in WordPress. First of all, Google fonts are
already included by default. Both the theme builder and any module with text settings allow the use of fonts. With The Use Of the theme customizer and Divi’s simple font styling capabilities, you may set fonts globally. Let’s examine the font-related features of Divi.
Activate the theme customizer to set fonts as the default font. From the WordPress admin panel, go to Theme > Customize Get Started. Choose Typography under General Options once the customizer has loaded. There are numerous ways to customize the size of the body and headings.
Fonts can be altered at the module level when text is visible in addition to the options available in the theme customizer. We’ll use changing the fonts in the text module as an example to show you how to do it.
You may find all of the text settings at your disposal under the design tab. Body text and heading text can both have their colors and styles changed. To access the dropdown menu to change the heading font, just click on it. You can alter the font, as well as its weight, style, text alignment, color, size, and other attributes.
How To Add Custom Font In WordPress Manually
Fortunately, manually loading a custom font onto your website is a rather simple procedure. Thus, you must feel at ease modifying theme files. The smallest error can cause your site to crash, thus we advise utilizing a child theme when performing this task.
Though it won’t provide you with a ton of options, adding a custom font to a generic WordPress theme will prevent bloat from slowing down your site. This is helpful if you know you don’t need many selections and will simply utilize a few fonts.
You must possess fundamental coding abilities as well as a comprehensive comprehension of how the WordPress file structure functions.
Adding Code To Change Fonts In WordPress:
There are a few ways to accomplish this, but for our example, we’re going to use WordPress’ recommended enqueue method.
- Copy the Roboto font’s link first. This is incorporated in the Google embed code and will appear like this example.
https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap
- Next, launch FileZilla and establish an FTP connection to your website. Visit the functions.php page at /public- html/wp-content/themes/your theme child. As you will be modifying a core theme file during this process, it is a bad idea to use a child theme. Please note: Change your theme child to the name of your child theme.
- open the FileZilla PHP functions window
- To open the file, simply right-click on it. After the other code in the file, add the following code.
01 \s02 \s03 \s04 \sfunction wp enqueue style( add my font()
Advertising New Custom Font In Wordpress Full Site Editing Theme
The @font-face CSS rule is no longer required to add fonts in full site editing (FSE) themes. The font is added to the asset/fonts/ folder in FSE themes, and it is then called the theme.json file.
Let’s go over how to integrate a unique typeface from Google Fonts into the Twenty Twenty-Twotheme before adding the necessary code to your website’s theme.json file.
We’ll utilize the Roboto font family from Google Fonts for this example.
- Downloading the font from the Google Fonts library is the first step.
- At the top right corner of the screen, select Download Family.
- It’s no longer essential to add fonts using the @font-faceCSS rule in full-site editing (FSE) themes. The fonts are called in the theme.json file after being added to the asset/fonts/folder in FSE themes.
- Let’s go over how to add a unique typeface from Google Fonts to the Twenty Twenty-Two Theme before adding the code to the theme.json files so that your website may make use of the font.
- We’ll use Google Fonts’ Roboto font family for this illustration. The Google Fonts collection must be accessed in order to download the typeface. At the upper right of the screen, select the Download Family button.
- To open the file in your preferred code editor, perform right-click on it. Scroll down to just past the source sans pro code in the typography settings of the theme.json file’s settings section.
Code Insertion In Theme.json File
Then, in the typography section’s Source Serif Pro font section, add the following code just before the closing bracket:
Save the file and add it back to the fonts folder by overwriting the file on your local machine or uploading it via FTP.
The Twenty Twenty-Two Theme: Font Viewing
You may view the new font after it has been added to your theme by going to Appearance > Editor in Twenty Twenty-Two. Click the styles button after the screen has refreshed.
- fashion button
- Click typography next.
- typography
The new font may now be chosen from the drop-down menu, and you can also change the font weight and other text-styling parameters for your website.
Adding A New Custom Font In WordPress Using Divi
Using Divi to Upload a New Custom Font Divi’s text module makes it simple to add new custom fonts to your website. TTF and OTF file types are both supported by Divi. You will see an error if you attempt to upload any other format.
- Add or modify a page to your Divi website to begin going. Add or modify a text module to your page next. To Access The module settings, click the settings button in your text module.
- module settings for text
- Expand the text settings after selecting the design tab. The Drop-down menu adjacent to the font name should be selected.
- Below is a list of every typeface available in Divi, along with the most recent font and an upload button
A pop-up window for the uploaded font will be displayed. Drag your TTF or OTF font into the drag files here section, or click the choose font files button.
New Fonts With Drag And Drop
Giving your font a name and selecting all checkboxes will ensure that it supports all font weights, which is the next step. To add your font to Divi after configuring the settings, click the upload button.
We should point out that if you add a unique typeface to your Divi website, the entire site will have access to it.
Best Practices For Changing Fonts In WordPress
Improve Your Fonts:
You should optimize your fonts while utilizing Google Fonts Or Any other web font vendor. If you don’t, your website can load more slowly. Simple measures like reducing the amount of font families used can significantly speed up page loads.
Choose Reputable Fonts:
Although choosing web fonts is a wise decision, only the properties should be used. Spend some time finding the ideal web fonts for your website. Consider your font pairing options as well.
Two serif typefaces together are generally not a good choice. After all, that may make things difficult and really busy.
Take Into Account Individuals With Accessibility Issues:
You should take into account people who have difficulty seeing tiny text in addition to selecting the appropriate typeface or fonts. Always choose a legible font and a minimum text size of 16 pixels.
The button text is comparable in this regard. Make Sure your button text is commanding and big. That helps everyone, not just people with visual impairments, and it’s also a fantastic call to action.
Wrapping Things Up
WordPress offers a variety of font-changing options. The Simplest way to do it if you’re using a generic theme is to utilize a plugin like Fonts Plugin | Google Fonts Typography. Although most full site editing themes provide you with more than just one or two choices, some don’t make it particularly simple to add additional.
Most options are offered by theme builders like Divi, so take that into consideration. Finally, manually adding typefaces can be the best solution for you if you’re a hands-on developer or only need a few selections.
In WordPress, how do you change the fonts, and which method is easier? Share your precious knowledge with the audience as it might be helpful for them. Post a comment below to let us know.
