9.2 C
New York
Friday, March 29, 2024
Eduma Premium Education WordPress Theme

How to Change Font in WordPress (Simple Methods)

A font is considered a combination of different typefaces, weights, sizes, slopes, and designs to form a printable or displayable set of text characters. Using fonts makes your website appealing but can also make it unappealing if you don’t know How to Change Font in WordPress

In this guide, we’ll help you change fonts using the built-in options in your WordPress theme. Even if your theme does not have the fonts you like, we will introduce you to a plugin with a lot of font choices. 

Let’s go!

How to Change Font in WordPress (Font Styles, Font Colors, and Font Sizes)

There are 4 ways to change fonts in your WordPress site that you can try by using the customizer, the block editor, the old classic editor in post/page, or your theme stylesheet. Moreover, you will learn How to Change Font in WordPress by changing the font styles, font colors, or font sizes.

How to Change WP Font Styles

Changing WP Font Styles in The Block Editor

If you’re using the new version, the block editor such as Gutenberg, you can change your text style easily while you are editing your blog post. You just need to choose the text and there is a styling menu which appears right above the text you have selected. 

font styles in block editor how to change font in wordpress

There are various options to change your font styles such as bold, italicized, strikethrough, inline image, etc. Then click the font style you want and see the result instantly in the block editor.

strikethrough in block editor

That’s How to Change Fonts in WordPress in the block editor. Let’s check the second method of changing font styles.

Changing WP Font Styles in the Old Classic Editor 

You can also change font styles with the old classic editor of WordPress. So How to Change Font in WordPress this way? Well, it won’t appear in the styling menu above the selected text, there will be a toolbar under the “Add Media” option to help you change your text style. Even if you wish to see more options like strikethrough, then click the Toolbar Toggle icon to see all of it. 

Similar to the first way, you just need to select words then click on the style you want on the toolbar. After that, your text will be changed as your purpose. 

classic editor toolbar

Changing Font Styles in the Customizer

Another way to change the Font WordPress styles is by accessing the customizer. 

First, you should open your WP admin area, hover your mouse to “Appearance” on the sidebar then click the “Customize“. Next, you can see “Additional CSS” then click on it. There is a space box for you to type in the CSS. 

additional css in customizer

So now you can enter the CSS there to change your font style. For instance, to change all H1 and H2 to bold letters, you can try this CSS:

Read more:  10 Best Free and Paid WordPress Portfolio Themes
css h1 font style

Changing Font Styles in Your Stylesheet 

If you are not a beginner and you know even a bit about coding, you can try How to Change Font on WordPress with this method. 

However, you must create a WP child theme for your own font styling. This is to help you avoid any issues with your parent theme. After creating a stylesheet in your child theme, it’s time to make font styling in the child too.

Now you can find the file of style.css in your WordPress theme folder in wp-content/themes. Then you can edit or change the CSS in that file, stylesheet. You can add any font style at the end of your stylesheet file. Even if you want to remove or overwrite the existing font style, it’s possible as well. 

For example:

CSS to change the font-weight in your stylesheet: 

css font weight

CSS to change the font-style:

css font style

CSS to change the text-alignment:

css text alignment

How to Change WP Font Colors

When you write a post or page, you might sometimes edit the color of some text so visitors can easily see it. However, do not make it over, a lot of colors in your site will confuse your readers. 

Changing Font Colors in Block Editor 

You can edit the text color as well as the text background in the block editor. In particular, you can quickly change the text color via the styling menu. If you did not see the text color on your styling menu, you can click the arrow next to there to find it.

Another way is to go to the “Block” tap and click the “Color Settings” part of the box on the right column of your post. 

color settings tab how to change font in wordpress

Now you can select/ choose the text then click on “Text color” or “Background Color” to edit as you want.

custom colors in a block

If your color combination is not good and readers have a hard time reading it, there will be a warning notification right below the “Color Settings” like “This color combination may be hard for people to read. Try using a brighter/ darker background color and/or a darker/ brighter text color” so you would know and re-change it.

So now you already know How to Change Font in WordPress via the block editor. Is it easy?

Changing WP Font Colors in Your Classic Editor

Similarly, you just need to select the text and click the A icon on your classic editor’s toolbar to change its color. Even if you choose to change only one word or a paragraph, it’s all possible. Let’s see the example below:

classic editor changing colors how to change font in wordpress

Remember that it will be useful and engaging visitors if you change the color correctly. But your site will look garish if you overuse it.

Read more:  10 Best WordPress Restaurant Themes Review

Changing Font Colors in the Customizer 

For this part, it’s good if your theme has a color scheme to Change Font WordPress colors. It means you can pick a new color scheme for your theme without any issues. Let’s check the color scheme in your WordPress customizer below:

editing color scheme in the Customizer

In particular, you can add CSS to find the color you want in case your theme does not have the target specific element to edit their color.

First, click the “Appearance” on your sidebar -> select “Customize” -> choose “Additional CSS” then type your CSS in the box.

For instance, you can type like below for changing H1 color:

h1 {

 color: #564534;

}

In case that CSS does not work well, you can add more specific CSS. This happens since it depends on each theme.

#site-title a {

 color: #564534;

}

additional css in customizer

If you like the color, click the “Publish” button to save your changes.

Changing Font Colors in Your Stylesheet

Same as font styles, you can change font colors in your theme’s stylesheet too.

For instance, you can edit the main text color for your site with body element:

body {

 color = #222222;

}

If you want the elements to have different colors, you have to override all existing stylings with the same elements. Your body element now will change all text colors after you Change Font in WordPress.

Changing Font Sizes in WordPress

It’s possible that your default fonts are suitable with your website. You definitely want it bigger or smaller. So how to do it?

Changing Font Size in Block Editor

You can easily change the text size by selecting your preferred block and clicking the “Text Settings” section at the right column in the “Blocks” tab. There are many options to choose: Small, normal, large, huge. 

editing font size in classic editor how to change font in wordpress

However, don’t overuse it too. If every paragraph has a different font size, it will be hard to read and look chaotic. Do you think it’s easy to learn on How to Change Font in WordPress, especially font size in the new editor.

Changing Font Size in the Classic Editor

Unlike others, you can not change the font size in the old classic editor. Hence, you need to upgrade your version if you need it. 

Changing Font Size in the Customizer

You should check your theme if it has the option to edit your font sizes in the customizer. It’s possible to edit the WP font size of the entire site or only headers or body text. 

Read more:  How to Disable Comments in WordPress: Detailed Guide

In case your installed theme has no customizer option, you can select “Additional CSS” from “Appearance” in the sidebar -> select “Customize“. Then you can type your CSS in the text box. 

For instance, to make the headings bigger in the WP widget areas, you can type as below:

h2.widget-title {

 font-size: 3em;

}

styling font size with additional CSS

Maybe this WordPress Change Font size is too big. However, it’s just an example.

Changing WP Font Size in Stylesheet 

How to Change Font in WordPress Theme in the stylesheet file? Well, you can follow the same steps like changing font colors or styles above.

You can change whole text size in your site, you can refer this body element:

body {

 font-size: 15px;

}

Please note that, you have to use pixels for the body element and use em for the rest.

Here is the example of changing H1 size:

h1,

#site-title {

 font-size: 2em;

}

To avoid any risk while editing the fonts in stylesheet, you should test your changes on the staging site.

How to add Google Fonts to any WordPress theme (Optional) 

If you don’t like to change fonts via your theme’s built-in options, you can try to use Google Fonts plugins. So you can have more font options, it can be thousands of fonts. The question now is How to Change Font in WordPress with plugins?

First, you have to install your WordPress Font plugin then activate it. Please refer to our instruction on How to Install WordPress Plugins if you’re a beginner. 

There are 2 free plugins that we highly recommend you to pick:

Easy Google Fonts

Fonts Plugin 

Secondly, go to your plugin’s settings and select the font you like. You should remember the name of that style for setting up later.

change wordpress font

Lastly, go to “Appearance” -> select “Customize” in your WordPress admin to find the “Typography” section. 

change font

After that, you can choose “Default Typography” and now all content types appear for you to set up such as paragraphs, H1, H2, H3, etc.

change font

And click the “Edit Font” in Heading 1, for example. Then you type the name and weight/ style of font that you have noted earlier to see real-change right away.

edit font

When you change all fonts, you can click the “Publish” button.

Final Thoughts

Hopefully, our instruction on How to Change Font in WordPress helps you to find the best way you want. If your theme has built-in typography options, you can change fonts right in the customizer. However, you can add a font plugin to get over 600 fonts options too.

Related Articles

Weekly News: Google Answers If Stop Words Should Be Used in URL

Google Answers If Stop Words Should Be Used in URL Google’s John Mueller answered a question about whether stop words should be used in the...

Weekly News: Google Analytics just introduced a new suggested audience

Google Analytics just introduced a new suggested audience The new suggested audience is called “7-day unnotified users.” These are app users who have not been...

Weekly News: Visualize Information On Twitter With Indiana University’s New Tools

Visualize Information On Twitter With Indiana University’s New Tools The Observatory on Social Media at Indiana University has released three new Twitter tools that allow...

Weekly News: Facebook confirms ‘massive ranking failure’

Facebook confirms ‘massive ranking failure’ Less than 24 hours after we learned about Meta’s smear campaign against rival social network TikTok, it has been confirmed that Facebook...

Weekly News: Google Search Console performance reports data issue may impact analytics

Google Search Console performance reports data issue may impact analytics Google Search Console had yet another data issue with the performance reports, this time impacting...
Latest Articles