How to Add Custom Fonts in a WordPress Website

Typography has a quite strong impact on your site’s visitors. We tend to neglect the fonts we use and end up using the most commonly used fonts like Calibri or Times New Roman.

Do you want to make your website more readable and beautiful? In this article we shall be elaborating on different methods to add custom fonts to your WordPress site.

Why Add Custom Fonts to your Website?

  • Font style, size and the way you present your content creates an impression on your visitor; determining whether he or she revisits your site or not.
  • To improve the readability of your content.
  • The more beautiful your content looks, the longer your visitor stays on your site.

Where to Search Different Forms for your Website?

  1. Google Fonts.
  2. Dafont.
  3. Typekit.
  4. FontSpring.
  5. Adobe Edge Fonts.

There are other options available online you can use for adding beautiful custom fonts to your site.

Few things to keep in mind while selecting custom fonts:

  • Ensure that the font looks good in all sizes so that it is readable irrespective of the device your visitor is using.
  • The fonts you select must go with the website’s layout and other fonts you have used.
  • You also need to understand that we have to make our website look beautiful and not messy by adding too many fonts.

Adding too many fonts will not only make your site look inconsistent but also slow it down.

  Now, let us see various methods you can add custom fonts to your WordPress site.

Adding Custom Fonts using Plugin

There are various plugins in WordPress you can use to add custom fonts.

We shall be installing Google Fonts plugin for further illustration.

Step 1: Install and activate the ‘Easy Google Fonts’ plugin. If you are a beginner and face difficulty in this step then check “How to install plugins in WordPress”.

 Step 2: In the WordPress dashboard go to Appearance >> Customize.

Here you shall see ‘Typography’ section, click on it and select the section you wish to add the new font to.

Step 3: Finally click on ‘Edit Font’ and choose a font from Google Fonts.

In this plugin, you can also create your own controls.

Step 1: You need to go to ‘Settings’ followed by Google Font. In the ‘Edit Font Control’ panel add a name to your control and click on ‘Create Font Control’.

Step 2: Add elements of HTML you wish to add the font to, like p or h1 and click on ‘Save font Control’.

Next, to use these controller again, go to Appearance >> Customizer >> Typography Tab.

Step 3: Now, in “Theme Typography” you will be able to select the control you created earlier.

Save the post and preview the changes on your site.

This is the most recommended method for beginners as it is very convenient and does not require coding.

There are various other plugins available on WordPress for fonts like Custom fonts, Font Awesome, Styleguide – Custom Fonts and Colours, WP Google Fonts and many more.

Adding custom font through Theme’s folder:

Uploading font file on Theme folder:

Step 1: Using your Ftp client, create a folder in the ‘Theme’s Directory’.

Step 2: Download a font file and upload it to the folder you have created (You can easily download the font file from the net).

Step 3: Open your child theme’s stylesheet and add this code:

@font-face {
 font-family: myFirstFont;
 src: url(sansation_light.woff);
font-weight: normal;
} 

Here font-family and URL are just for example purpose; you have to put in the necessary information of your font.

 Step 4: Next add this piece of code to configure which element is using the font

.h2 site-title { 
font-family: “myFirstFont", Archivo Black, sans-serif; 
}

Here h2 is the element for which we are adding the font. Again the code will vary as per your needs.

Editing your Theme’s File:

Step 1: Go to Google fonts and open the font you wish to use and click on “Select this Style”.

Step 2: Click on ‘Embed’ and you will see two codes.

Copy the first code in the head tag of the child theme’s header.php file.

<link href=”https://fonts.googleapis.com/css2?family=Sansita+Swashed:[email protected]&display=swap” rel=”stylesheet”>

In child theme’s stylesheet copy the next code;

font-family: ‘Sansita Swashed’, cursive;

Note: Your child theme’s stylesheet should be within the same directory as the header.php file.

Recent Articles

Standard Display Drivers for Windows 10 FAQ

Drivers act like a translator between the device they control, and the other programs in your system. Google Translate is not support in your...

Pictures Tutorial How to Reset USB Ports on Windows 10 8 7?

If you did not find it, close the window and update a different driver. Authentic and functional files are kept in a compressed cache...

How to properly update device drivers on Windows 10

Windows Update, Device Manager, and Auto-Update Assistants from device manufacturers. In most cases, these methods will keep your device drivers installed and updated properly....

Injustice: Gods Among Us APK OBB Download Install 1Click Obb Installer for Injustice: Gods Among Us

The traitor will need to be found before they can kill everyone else. You can download this game for your phone or tablet from...

Ohjelmien poistaminen Windowsista

Jos Lutriksesta ei ohjeita löydy tai jokin ohjelma ei suostu käynnistymään, kannattaa ensimmäisenä vilkaista Winen tietokannasta, onko sitä lainkaan mahdollista saada toimimaan. Bugiraportteja,...

Related Stories

Leave A Reply

Please enter your comment!
Please enter your name here