How To Change Font In WordPress? (WordPress Fonts List)


Typography is really important and can change the entire look and feel of your online website. And so, it is very important that you pick a font style that compliments your brand identity.

 

However, if you are a WordPress user struggling to tweak the typography settings, then don’t worry as we have a quick tutorial to help you out:

How To Change Font In WordPress?

Log into your WordPress Dashboard and then head to Appearance > Theme Editor. This will open up a simple text editor interface where you will get to see the code of your WordPress theme

. Navigate to the main Stylesheet for the theme. In the stylesheet file, paste the following code at the top:

* { font-family: “Times New Roman”, Times, serif }

Now click on Update File and the new Font Style will be implemented on your website.

Since you are basically tampering with the core CSS file of your WordPress theme, any wrong tweaks can break your website. You should be very careful while making these changes, and preferably try it out on a child theme if possible. Beginners are advised to follow our step by step in-depth guide on the topic to make sure no accidental changes are made to the core code.

An In-Depth Guide On How To Change Font in WordPress

Step 1:

Access your WordPress dashboard. Now use the left-hand side menu to navigate to Appearance > Theme Editor.

Step 2:

Once inside the theme editor, select the main stylesheet file for your theme. Now add the desired font-family at the top of the text editor as shown in the image below.

Here we use the front-family: { font-family: “Times New Roman”, Times, serif }

Also, notice the use of (*) at the begining of the code. This is to assert that the new font is to be applied throughout the theme.

Do Note: We have Used WordPress Twenty Nineteen theme for this example. The Theme Editor Code might be different for other WordPress themes. If that is the case, go through the theme documentation to find the main stylesheet for the theme you are using.

Alternatively, Use The In-Built CSS Editor That Comes With Certain Themes

Some WordPress themes, not all, comes with a built-in CSS editor. This eliminates the need to meddle with the theme’s core code and provides a more secure means for adding custom CSS.

In order to find out if your theme allows the use of custom CSS, head on over to WordPress Dashboard > Appearance > Customize. This will open up WordPress Live Customizer.

Now, if your theme supports custom CSS, you will notice a similar option as shown in the image below.

Selecting the option will open up a text field where you can enter your custom CSS code. Changes will be updated in real time.

How to Change Font In WordPress Using Plugins

Messing around with all this code isn’t everyone’s cup of tea, especially for non-tech-savvy individuals. If you feel intimidated with the task of tweaking the core code of your WordPress website, then taking the plugin route will be most ideal.

In fact, WordPress offers hundreds of useful font plugins that will not only give you access to free font resources but also help you implement them on your whole website or specific areas.

Some notable fonts plugins for WordPress include:

And much more.

WordPress Change Font On One Page

The easiest way to change fonts on one page like posts is to use a plugin like TinyMCE Advanced. Once you have installed this plugin you will have a new set of options on your post like the font dropdown selection.

WordPress Fonts List

Here is a list of the top 25 most popular fonts on WordPress:

  • Roboto
  • Playfair Display
  • Open Sans
  • Montserrat
  • Merriweather
  • Lato
  • Bebas Neue
  • Noto Sans
  • Source Sans Pro
  • Oswald
  • PT Sans
  • Rubik
  • Nunito Sans
  • Fira Sans
  • Works Sans
  • Poppins
  • Josefin Sans
  • Ubuntu
  • PT Serif
  • Muli
  • Arvo
  • Oxygen
  • Raleway
  • Noto Serif
  • Nunito

 

Related Questions

How Do I Change The Font On My WordPress Theme?

The easiest way to change your font globally is to go to Appearance =>Customize and go to the CSS and paste the following code in with the font you want to have:

{font-family:”Name of font”}

If you want to have a lot more options I would suggest you go with a plugin like Easy Google Fonts. Its very simple and you can customize many different areas like the front page, the header, posts…etc.

How Do I Use Different Fonts In WordPress?

Your best bet when it comes to using different fonts throughout your website is to get a great plugin like Easy Google Fonts if you are a beginner or you can use CSS if you know what you are doing.

How Do I Get More Fonts On WordPress?

To get more Fonts on WordPress you can use plugins that connect to libraries of fonts to get them. One of those is Easy Google Fonts or Type Kit Fonts For WordPress. There are others as well try the Easy first then go from there.

Conclusion

When it comes to your website you want to make it unique enough to stand out from the rest but you also at the same time don’t want to over do it either.

If you are new to WordPress or building websites in general just go the Plugin route it will be much easier.

You can also of course go the manually way and just use CSS. This keeps your site without any bloat which can be caused by lots of plugins.

One thing to pay attention too is that all things won’t work on all themes that is why we give different options. There are themes that just don’t allow different fonts or ones that allow fonts on the desktop version of the website but not on the mobile.

So do your own testing by visiting on your mobile and laptop. that should be sufficient.

Testing out the speed of your site you can just do that through google for free at: https://developers.google.com/speed/pagespeed/insights/ 

 

Tab Winner

Hello my name is Tab Winner. I have a degree in Information Technology with a concentration in Web Development. Which honestly doesn’t mean much in today's world with the entourage of site builders at anyone's disposal. I have been a full time Entrepreneur since May 2016.  I haven't looked back since.

Recent Posts