How to Change WordPress Fonts?

change-wordpress-fonts-featured-image-final

If you want to improve the branding or simply just make small tweaks to your WordPress site, one way to achieve that is by changing the font. You can do this using the WordPress customization option or utilizing a custom CSS code.

How to Change WordPress Fonts Using Built-In WordPress Customization

Inside your WordPress dashboard, simply go to Appearance > Customize. You’ll be redirected to the theme designer page. Go to Global > Topography then you can select either Base Topography for paragraphs and base design, or you can select Headings for the H1, H2, H3, and H4 tags.

change-wordpress-fonts-dashboard-appearance-custom

How to Change WordPress Fonts Using CSS Custom

If you intend to use a new font, you’ll need to do pre-coding through the @font-face rule. The first thing you’ll need to do is pick a licensed font for web use. Then, you’ll need to upload your preferred font to your hosting. Lastly, you’ll need to define your font family to the top of your style.css.

@font-face {

                font-family: CustomFont500;

                src: local(‘CustomFont500-Regular’),

                url(“fonts/CustomFont500-Regular.ttf”) format(‘truetype’);

                font-weight: normal;

}

1. Change Font Globally

Changing your font across your theme is as easy as injecting one line of code. Find your themes editor by clicking on ‘editor’ under the Appearance tab. At the bottom of the page, you’ll find the theme’s CSS stylesheet. This is where fonts are set.

Put this code on the top of your Stylesheet:

* {

font-family:”CustomFont”

}

2. Change Font For Specific Areas

Having more control in what specific area you want to change the font is more convenient. However, identifying font areas can be difficult because WordPress themes use a font differently. In fact, fonts can be used anywhere.

Usually, a certain font is found inside the body tag. This will be used to determine the font for fonts within the site that aren’t defined by a specific tag, class, or div.

body {

                font-family: Arial, sans-serif;

                font-size: 1rem;

}

You can also add a custom class or id inside a certain HTML tag to target it specifically.

Using a Plugin

If you don’t identify yourself as an experienced coder or simply don’t want to mess with code, using a plugin to modify font styles is the way for you. The truth is that many people turn to WordPress because coding is foreign to them. Within the plugin directory, there are lots of free fonts that can bring your WordPress site a unique touch.

1. Easy Google Fonts

change-wordpress-fonts-easy-google-font
View Details

Being made by Google, it has a huge collection of fonts and offers a straightforward and easy way to add custom Google fonts to any WordPress theme without coding. This plugin blends with the WordPress editor so you can preview Google fonts on your site live. You’ll be able to change the color of each header to set them exclusively. Find a font family you like and work around with various versions of it.

2. Google Fonts Typography

change-wordpress-fonts-google-font-topography
View Details

WP Google Font plugin performs even easier than Google’s free font service. Not only does this plugin add the required Google script, but it also gives you the capability to allow the Google fonts to particular CSS elements of your website from inside the WordPress admin. It’s an excellent way to design your site even if you’re clueless about coding.

3. Use Any Font

change-wordpress-fonts-use-any-font
View Details

This plugin is free and has over 100,000 active installs.

Unlike the options mentioned above, Use Any Font has this incredible ability to allow the use of any font on the web, as the name implies. Download any font you want and find on the web, you can grab it and upload it to your website. The plugin has built-in editor so you can select any segction you want and change it.

Wrapping Up

If you’re ready to give your WordPress site a makeover, do so by changing your fonts. And now you know your options on how to do it, it won’t be so hard to get started.

Leave a Comment

Scroll to Top