Tutorial: Change The Font Family in WordPress

Hi Everyone! Welcome To TrendingWP. In Today’s article, I will show you steps to change the font family in a WordPress Blog. If you prefer written articles, then you can find the link to this article in the description below. Now to start the process. Go to your dashboard.

The first and easiest way to change the font family is the Easy Google Fonts Plugin. So go to the plugins, Click Add New. Now Type Easy Google Fonts in the search box. Install and activate this plugin. Now go to the appearance. Open customize in a new tab.

Here you will see a Typography option. Open this option. Then open Default Typography. Here you can customize the font family for Paragraphs and all the Headings. For example, If you want to change the font family for this paragraph.

Customize The Font Family for Paragraphs

Then click on edit font under the paragraphs option. Then choose the font family of your choice. As you can see, Easy Google Fonts is automatically changing the font of your website. Similarly, You can also customize the font family for all the headings. And you can also create your own custom font control for all the font families.

To create a custom control, go to your dashboard. Settings, Click on Google Fonts. Now Enter a name for your custom control. Click Create Font control. Now enter the Tag or CSS selector for which you want to change the font family.

For example, If you want to change the font family for this paragraph. Then right-click on this, Click Inspect. As you can see, this is the P Tag. Normally; All the paragraphs are the P Tag. Then, If you also want to change this. Then Right-Click on This, Click Inspect. This is the H4 Tag, Heading 4.

So you can add all the tags in this box to change the font family of all those tags. And if you want to change the font family of the whole website. Then you can just enter an asterisk and check this box to override all the previously assigned CSS.

Customize The Font Family for Paragraphs

Change Font With Plugin Support

Then click save font control. You can also click create new font control to create another font control. This plugin allows you to create multiple font controls. You can create multiple control as per your requirement. Now go to the customize option and refresh this page.

How to Edit Footer Copyright Text In Any WordPress Theme

After creating the custom font control, You will see a new option: Theme Typography. Open this option. Then you will see your custom control here. Click Edit Font inside this option. Then select the font family of your choice. As you can see, this time, this font control is changing the font family of the whole website.

Change Font With Plugin Support

Now I will show you the second way to change the font family. So I am going to undo all the changes. The second way to change the font family is additional CSS. Go to the customize option and refresh this page. You have to enter the CSS code manually to change the font family of your website.

Go to the additional CSS option. First, you need to import a font from the Google fonts website. So go to Google Fonts, Select the font of your choice. I am going to use the pacifico. Then click select this style. Now click on this option. Click on Embed. Then click on Import.

Add Font Codes in Additional CSS section

Copy this import URL. Now go to your website and paste this code in the Additional CSS section. Now click enter. Now enter a tag for which you want to change the font family. For example, If you want to change the font family for the paragraph. Then type P and open and close curly bracket.

Add Font Codes in Additional CSS section

Then inside the curly bracket, Type the font family. So to type the font family, Go to Google Fonts. And copy the font family. And Paste it here. As you can see, this code is properly changing the font family of the paragraph. You can also add other tags to change the font family.

For example, if you also want to change the font family of H4. Then enter comma and type H4. Then this will change the font family for both: paragraphs and heading 4. But Heading 2 shows the old font family because you have just added two tags: paragraph and heading 4.

You can also visit the article page and scroll down to the code section. And copy this code. This code will change the font family of the whole website. Now go to Google Fonts. Copy import URL. And replace this URL. Now go to Google Fonts again and copy the font family. And replace the font family.

This time this code is changing the font family of the whole website. Now I will show you the third way to change the font family. So I am going to undo all the changes. The third way to change the font family is the theme file. So go to the Appearance, Click on theme editor.

Style.css Customization

Now select the style.css file. Now go to the written article page. Scroll down to this code section. And copy this code. Now go to the theme file and paste this code. Now change the import URL and font family with the font family of your choice. Ignore this message.

And Check update anyway and click update file. Now view your website. This website is still showing the old font family because it’s showing from the cache file. So try to clear the cache and refresh the page. Or try to open this website in another browser.

Style.css Customization

I am trying to open this in another browser. As you can see, this code is working but only on the headings and paragraphs. Not on these fonts. So to change the whole font. Go to the theme file. And add important with an exclamation mark after the font family.

How to Add Facebook Page Widget in WordPress

Now click update file. Now go to your website and refresh this page. As you can see, this time, this code is changing the font family of the whole website. I hope you found this article helpful.

Leave a Reply

Your email address will not be published. Required fields are marked *