How to Change Fonts on WordPress Website?

How to Change Fonts on WordPress Website

In order to give a unique look to your design, adding custom fonts is always a wise decision. Fonts and Typography has always remained an essential element in the success and failure of every website.

You can change fonts on WordPress, and entirely change the look of your website, but how? This is the real question that I am going to answer in this guide.

Why Change Fonts on WordPress Website?

Changing fonts on your WordPress site is the appropriate way to make the context readable and appreciable.

The custom fonts allow you to make an appealing combination of fonts that gives another level of touch to your site. So why not to make your website extraordinary by adding custom fonts and typography?

If you have a WordPress site and you are looking forward to knowing the ways through which you can change fonts, then this guide is for you. The process is as easy as it seems without any hard and fast rules. So, let the guide begins.

Get Your Hands on Web-Friendly Fonts

Before starting the process, you should first get your hands on web-friendly fonts because not every browser holds up every font. Before making the fonts web-friendly, you first need access to fonts that you are going to use in your website.

How to Find Free Fonts

You will come across many websites that offer free fonts. Furthermore, many fonts are accessible free of cost for personal and commercial purposes, from which you can make an easy selection.

If you are going to design a fashion website or store then I will recommend you to go with Gucci font which is available free of cost and you can easily use it on your WordPress site. Now once you have the font, the next step requires making it web-friendly if it isn’t.

Generate Web-friendly Font Files

If the selected font isn’t compatible with your browser, then making it web-friendly is the only way. There is a term ‘Web font Generator‘ that lets you transfigure every font into a web-friendly format free of cost. You won’t get a better option to complete this process other than this tool. What you need to do is:

  • Go to the Web-font Generator tool.
  • You will see an option “Add fonts“. Click the button.
How to Change Fonts on WordPress Website: Add fonts in Web-friendly generator
  • Select the font that you want to make compatible with your browser.
  • Select all necessary font formats (TTF, WOFF, SVG, EOT, WOFF2) and ensure that the “Family support” option is enabled.
How to Change Fonts on WordPress Website: Web-friendly generator options
  • Click on the “Convert” button and proceed to download your font files.
How to Change Fonts on WordPress Website: Web-friendly generator conversion
  • Save the Zip file in your system. You are all set to use it.

The next step requires adding custom fonts to your WordPress site.

Change Font Manually

Here is the first process with which you can change fonts on your WordPress site. If you don’t want to overload your website with unlimited plugins, then this process is surely for you.

To begin the process, download your web-font files from the previous step. You will find a CSS code in the downloaded archive.

  • The next step requires uploading the font files to your font theme directory. Suppose you don’t have any theme directory to create the one to upload the font file. You can use any File Manager to complete this task. It’s totally up to you.
  • Now go to your WordPress Administrator Dashboard, where you will come across the “Appearance” option. Click that option and later go to the “Theme Editor” option.  You will witness a CSS file from where you have to add the downloaded CSS code.
  • Once you are done with the process, click the upload option to save the changes.

The CSS code you have entered will load the added font every time any person will visit your site.

After completing the task, you still need to assign the font to a CSS class/element. Once finished, the added font will be assigned to each element with given class. An example code would be:

.your-style {
    font-family: 'Montserrat Alternates';
    font-weight: 900;
    font-style: normal;
}

Change Font with WordPress Plugins

If you do not want to proceed with the first method, here is another way to change fonts by installing plugins. It is an easy and straightforward way to get the work done.

Select a plugin

You can simply go with Custom fonts plugin or if you want you can get many notable plugins from different sites free of cost, choose as per your requirement.

Customize fonts

Once you have selected a plugin, install and activate that plugin in your WordPress Dashboard.

Once the plugin is activated, you would be able to download the fonts in different formats, including TTF and OTF, etc. After the font activation, go to the settings from where you can assign your required specifications to the font i.e font size, etc.

However, I would recommend you to go along with this process because it only demands a plugin installation. Yet if your site is already filled with many other plugins for different purposes, you can think about the above-mentioned process.

Conclusion

Through this guide, you have learned how to change fonts in WordPress. First, how to make the fonts compatible with your browser, and secondly, how to add custom fonts on the WordPress site. I have made sure to simplify the method for everyone’s better understanding.

Whatever font you choose for your website, make sure it compliments your website’s theme and style. The time had gone when a graphic designer had hardly a few options for font selection. Now from unlimited font types, you can surely come across the most appropriate one for your website.

Make your design captivating by adding custom fonts because typography makes your site look clear, legible, and fascinating. I hope you will find this article informative and obliging.

About the author
About the author

Bootstrapthemes editorial team comprises professionals that strive to deliver well-researched and comprehensive content focused on WordPress, web design, and growing your online ventures.

Leave a Comment