Fonts in WordPress are a crucial part of a company’s branding. While some may dismiss fonts as irrelevant, for many, they’re an essential part of their website.
Along with colors, images, logos, and other branding elements, fonts play a vital role in your brand’s image, and how the customers perceive your brand. Since they offer a wealth of options, WordPress is one of the best platforms for customization.
Despite the fact that there are many free font options, it’s essential to know how to change fonts in WordPress, which might require some knowledge of CSS coding.
This article created by our team at wpDataTables will demonstrate how to change fonts in WordPress easily.
How to Change Fonts in WordPress Themes
Let’s look at the following scenario. You want different font combinations for your website, but something is stopping you to move forward.
Changing fonts in themes can be challenging because they usually come with preset fonts that are used in various parts of the theme. You need to locate the CSS script that is setting the font for the specific area, whether it be the footer, header, body, or other parts.
Some pre-coding will be required if you want to use a completely new font. First, choose a licensed font for your website, and then upload it to the server. At the top of the style.css, you’ll also need to define the font family. Here’s an example of how the code might look:
@font-face {font-family: Museo300;
src: local(‘Museo300-Regular’),
url(“fonts/Museo300-Regular.ttf”) format(‘truetype’);
font-weight: normal;}
How to Change Fonts in WordPress Globally with the Customization Feature
Changing fonts with the customization feature is straightforward. First, log into your WordPress profile and access the dashboard click on Appearance, and then Customize.
Another way to access this area is by logging into your WordPress dashboard, click on the site name at the top left, then click on the Customize button.
Then, scroll down to the left-hand side and locate the field where you can add additional CSS code. Click on it to add the code. Here’s an example of the code:
* {font-family:"Courier New", Courier, monospace}Copy
When you add the * at the start, it will add the font to the whole site. When you paste the code, it’ll instantly change. When you are ready to make the changes, click on the Publish button.
How to Change Fonts in WordPress in Specific Areas of the Theme
Themes come with preset fonts in various areas, and you’ll require different fonts for different areas on your site, which adds customizability. Identifying themes in different areas is challenging.
You’ll find a font for the body that’s separate from the rest, which can be used to determine the fonts not defined by a tag, class, or div.
body {font-family: Verdana, Arial, Helvetica, Futura, sans-serif;
font-size: 1em;
padding:0;
margin:0; }
You’ll probably find the fonts in the various CSS classes: content, post, entry, and post-entry.
Add Custom Fonts
Adding custom fonts is one of the best ways to change headers and the base font. Go to Design > Customize > Fonts.
Changing to a custom font is easy. There are many great fonts found on Google Fonts, Typekit, and lastly with WordPress premium subscription or higher.
How to do it:
- Go to Design>
- Click on Fonts in the Customize section. Then, click on the drop-down menu to see the options available under the Headings option.
- If the fonts here are not visible, then the theme probably doesn’t offer the option to change fonts to custom fonts. In that case, find another theme that does offer this option.
- Fonts will often come in pairs, one for headings, and one for the body. For headings, it’s essential to choose a font that is appealing for the titles, widget titles, comment headers, and other areas of the The base font will be the font for the body text so make it as legible as possible.
- You’ll see a live preview before you can choose a font.
How to Adjust Font Size and Style
To adjust the Font Style, click on the option left of the font. You’ll have different styles available, depending on the font chosen.
To adjust the Font Size, go to the size option below, and adjust the font size. Make it appropriate for headings, or, for the body, which is simple to do from the drop-down menu.
WordPress premium subscription or higher, allows changes to the font size in the CSS code.
How to Save Fonts
When you’ve finished the customization options, the font is saved in two ways: by clicking on Publish your site, or on Save draft.
After saving, wait for a couple of minutes for the fonts to show up on the blog. If they don’t show up, try to clear your browser’s cache to make sure it’s the latest version of the site.
How to Change Fonts
Here’s how to change fonts in WordPress once you’ve created a custom font.
Change custom fonts by going to Design, and then to Customize. Then, go to Fonts, select a different Header or Base Font. You can also switch back to the default font by clicking on the X, which is located right of the custom font name.
To complete the font changes, click on Publish or Save Draft.
Again, it could take a few minutes for the fonts to show up, and clearing the browser’s cache is essential.
Resetting Fonts
To reset fonts simply press on the X next to the current font you use.
How to Enqueue Fonts
To correctly add the fonts for WordPress, you’ll need to alter various files; most importantly, the functions.php file, or the function_wp file; enqueuer_script and wp_enqueue_style.
With code snippets, simply change the font without entering the code into the files. Just add them to the header via a function.
Wp_enqueue_script and wp_enqueue_style are similar files, so it’s better to change the style file, depending on what your font provider offers.
Google Fonts will give fonts as style sheets, so add them like this:
function add_google_fonts() {
wp_enqueue_style( 'google_web_fonts', 'https://fonts.googleapis.com/css?family=Open+Sans|Roboto' );
}
add_action( 'wp_enqueue_scripts', 'add_google_fonts' );
Other fonts, like the Adobe Edge Web Fonts will come in the form of Javascript files. The code would look like this:
function add_adobe_fonts() {
wp_enqueue_script( 'adobe_edge_web_fonts', '//use.edgefonts.net/open-sans.js' );
}
add_action( 'wp_enqueue_scripts', 'add_adobe_fonts' );
Once you know where to make the font changes, this function becomes simple.
How to Change the Font Size
Adjusting the font size is fundamental, simply by adjusting the heading sizes. While using a visual editor, all the options are found under the tab called “Paragraph”.
Usually, the font sizes are controlled by the style.css file, which will enable access to the font sizes.
Using the right headings in articles is essential for creating a satisfactory user experience as well as making it more SEO friendly.
FAQs about changing fonts in WordPress
1. How can I change the font size of my WordPress website’s body text?
Go to the “Appearance” area of your WordPress dashboard and choose “Customize” to alter the font size for the body text on your website. Go to “Typography” from there and set the “Body Font Size” slider to the size you want.
2. Is it possible to use custom fonts on my WordPress site? If so, how can I do that?
You can indeed utilize unique fonts on your WordPress website. To add custom fonts to your website, you may either use a plugin like Simple Google Fonts or custom CSS code. Custom typefaces are frequently chosen from the Google Fonts library, which is simple to incorporate using a plugin or code.
3. How do I change the font family of my WordPress site’s headings and subheadings?
You may use the same technique as altering the body text font size to change the font family of the headers and subheadings on your WordPress website. To alter the font family, size, and other settings, go to “Typography” in the Customizer and choose “Headings” or “Subheadings.”
4. Can I change the font color of my WordPress site’s text, and if yes, how?
You can alter the text’s font color on your WordPress website. Once more, go to “Typography” in the Customizer, choose the text component you wish to change, and then pick the color you want. Also, you can utilize customized CSS code to alter the color of particular parts or sections.
5. What’s the easiest way to change the font style of my WordPress site’s navigation menu?
Using a plugin like “Menu Font Styler” is the simplest way to alter the font style of the navigation menu on your WordPress website. Even if you don’t know much about coding, you can use this plugin to alter the font, size, and color of your menu text.
6. How do I adjust the line height and spacing of the text on my WordPress site?
You can use CSS code to modify the line height and spacing of the text on your WordPress website. To change the distance between text lines, use the “line-height” property, and to change the distance between individual letters, use the “letter-spacing” property. As an alternative, you can add unique CSS code to your website without modifying the theme files by using a plugin like “Simple CSS.”
7. How can I make my WordPress site’s font responsive to different screen sizes?
Use CSS media queries to adapt the font on your WordPress website to different screen widths. Based on the screen width, these queries let you change the font size and other attributes. For smaller displays, you could reduce the font size to make it easier to read.
8. Is there a way to change the font of my WordPress site’s specific pages or posts only?
On your WordPress website, you can indeed alter the font on particular pages or articles. To accomplish this, go to the page or post you wish to edit, choose “Text,” and then use HTML tags to specify the font family, size, and other parameters.
9. How can I change the font of my WordPress site’s widgets or sidebars?
Use a plugin like “Custom Sidebars” to alter the font used in your WordPress site’s widgets and sidebars. With the help of this plugin, you can design unique sidebars and change the font, size, and other characteristics of the text that appears in them.
10. What are some plugins that can help me change the font of my WordPress site?
Simple Google Fonts, Menu Font Styler, Custom Fonts, and Typekit Fonts for WordPress are some of the more well-known plugins for altering the font on your WordPress website. Choose the plugin that best meets your needs from the variety of features and capabilities offered by these plugins.
If you enjoyed reading this article on how to change fonts in WordPress, you should check out this one about how to download the WordPress media library.
We also wrote about a few related subjects like how to find the page ID in WordPress, how to embed a WordPress iframe, how to eliminate render-blocking JavaScript and CSS in above-the-fold content, how to stop a DDoS attack and how to hide page title in WordPress.
