How To Add Custom Fonts On WordPress Without Code

Don’t like the default WordPress fonts on your theme? We got you covered. In this article, I’ll show you how to add your custom fonts to your new WordPress site. If a brand were a person, the sound of their bespoke font would be like their voice. The sound of that person’s voice will support any ideas they may have voiced.

What are the benefits of a custom Font?

We want the brands we develop to be recognizable across all of their communication channels including your new pages.

A unique font acts as a crucial link that unifies a brand’s identity and gives the project the freedom to clearly and consistently communicate its message and purpose.

Why Change Fonts on Your WordPress Website?

Both size and color of web fonts can assist you in defining the structure of your content. The more appealing a font is, the bigger it is; the next largest, the next most appealing, and so on. By choosing different font sizes, you can instruct your audience to read your material in the order of importance.

Before we get started on adding Custom fonts on WordPress, we need to first check if your Theme has a font option

The current theme we are using is ocean Wp

Step 1: Appearance > Customize

In order to change it, you go to “appearance” and click on “customize”

Step 2: Find “Typography”

Go to typography

And you will get options on where you want to change your fonts

For example, when you go into H1, you can change the font family, font style, Font size, Text transform, and Text size. 

Once you have done that and you are happy, you can click on Publish.

How to add custom fonts using plugins

Step 1: Plugins > Add New

Go to Plug-ins and click on “Add new”

Step 2: Find “Fonts”

In the search bar, search for “Fonts” and install and activate the one highlighted in red.

Step 3: Fonts Plug-in > Customize

Make sure your plug-in is activated. Go to “Fonts plug in” and click on “Customize”

Step 4: Click on “Debugging” > Force Styles

When you have done that you can click on the “Publish” button at the top

Step 5: Publish > Go back to Basic Settings

Go back and click on “Basic Settings”

You can now change all the text font, the headings font as well as the Buttons and Inputs font.

If you want to save your changes, just go ahead and click on the “publish” button.

Uploading your personalized font

Step 1:

Go to “plug-ins”, click on “Add New”

Step 2:

Go to the search bar and search”Use any font”

Install and activate the one we highlighted in red

Step 3:

Now that it is installed, the first thing you need to do is to make sure you have your own API key

Step 4:

Now go to “ Upload Font”

As you can see you can now name your own font.

Step 5:

Now you need to upload your own font on the “font file” button and click on “Upload” and you are finally done!!

To make sure you have your own font in your settings, just go to your typography and change your font style. Your new font will be available and waiting for you to use it

How to Change Font Size, Color, Family & Style in Elementor Website Builder

The ability to change text color and typography settings is a feature included in several Elementor Widgets. The Style tab for the widgets is where you’ll find these design choices.

Choose a font family for your typography.
Size – Select the font’s size 
Weight: Select the font’s weight.
Transform – Select the font’s transform attributes.
Choose between the styles Standard, Italic, and Oblique.
Decor – Select the wording Decoration
Line Height: Set desired line height using the slider.
Letter Spacing: Adjust the letter spacing using the slider.

Conclusion

Did you like this tutorial? Read our newest article on how to disable the block editor and switch back to the the classic editor on WordPress. If you need more amazing tips and tricks on WordPress, just watch another one of our videos.

FREE EBOOK: How to Build a Wordpress Website

FREE

As a complete beginner!

FREE EBOOK: The Ultimate Guide To Speed Up Your Website and Increase Conversions!

FREE

Site Speed Secretsis a is a step-by-step blueprint about how to speed up your website and increase conversions.