How to Change Font in WordPress with Easy Google Fonts

In the world of world wide web, choosing the right font can mean more than just a touch of style to your business. There are two types of fonts, free and premium fonts. I highly recommend you to start with free fonts. In this article, we will use Easy Google Fonts plugin to add custom fonts from Google fonts database to your website without touching any code.

Google fonts have over 600 fonts in multiple languages for you to choose. All fonts come with backward browser compatibility which works in all major browsers. The Easy Google Fonts plugin integrate with WordPress and your theme seamlessly. You can preview your selected Google fonts before save and publish to your website. It’s fast and robust way to add any fonts to your website and not causing any conflicts with any plugins or themes.

Step 1 — Install Easy Google Fonts

You can easily install the Easy Google Fonts plugin manually or automatically from WordPress’s plugin menu

Manually Install

  1. Download a Easy Google Fonts package
  2. Go to WordPress Administration panel and go to Plugins ->  Add New
  3. Upload the package
  4. Activate Easy Google Fonts Plugin

Automatically Install

  1. Go to Plugins -> Add New page
  2. Search for Easy Google Fonts
  3. Click Install and Active
  4. Activate Easy Google Fonts Plugin

If you are struggle with the installation process, make sure you check out the demonstration video below. It will guide you through or leave a comment down below.

Step 2 — Customize and Preview

Go to Themes -> Customize

Once the customiser screen is loaded you will see a new Typography menu added to the list. 

Click to open Typography menu you can click edit font for each element such as Paragraphs, Heading 1 (H1), Heading 2 (H2) and so on.

In each element setting you can also config these parameters for better styling

Styles Tab

Script/Subset
Language of your font (Some fonts support multiple languages)

Font Family
Name of your font

Font Weight/Style
Thickness of your font and style (italics).

Thickness Level
Thin (200), Light (300), Regular (400), Medium (500), Bold (700)

Text Decoration
Add underline, overline and line-through

Text Transformation
Automatically apply capitalise, uppercase or lowercase 

Appearance Tab

Font Color
The default colour of your font.

Background Color
Add background color to the font.

Font Size
Increase/Decrease font size. Normally we set it for 16px.

Line Height
The height between each line. Optimal line height is 1.4-1.6.

Letter Spacing
Space between each character.

Positioning Tab

Margin
The space outside the text

Padding
The space inside between text and border

Border
Add border to the text

Border Radius
The roundness of the border

Display
Block for full width and Inline Block for display in the same line with other elements

Step 3 — Publish

Once you have set everything, do not forget to Click the blue publish button to confirm changes you just made. 

Step 4 — Test

Go back to your homepage or posts page to verify that your change has been made. Open up other browsers and double check the font on other devices and in mobile version of your website. Make sure it display correctly, font size is readable and line height is appropriate. 

Easy Google Fonts Plugin Install Instructions and Demonstration

Congratulations! you just finished customized the font for your website without coding. Let me know if you encounter any problems with the comment box below.

Share this content!
  • 100
  •  
  •  
  •  
  •  
    100
    Shares
  •  
    100
    Shares
  • 100
  •  
  •  
  •