How to Add Custom Fonts to WordPress Website?


Custom Fonts WP

Font designs are some of the best ways to attract visitors to your website. They can turn visitors away or convert them into sales.
In this article, we are going to discuss custom font designs and how you can add them to your website to double sales volume and improve business.

Custom fonts usually involve enhanced typography, better user experience, and type kits. They directly impact the brand image of the business.

Some of the best methods to add fonts to your website are Google Fonts, TypeKit, CSS3@Font-Faced methods.

We will be discussing all of them in detail below.

Table of Contents

Can Fonts Slow My Website?

Some people believe that fonts can directly impact site performance. While that is true to some extent, current cache and CDN extensions allow font style deferring. Font deferring delays the site design so that the website performance is not impacted by the font style you use.

Customize Your WordPress Website Through Expert Help. Get In Touch Today

How to Find Custom Fonts for Your Website?

Before we discuss the methods to add fonts to your website, it is important to find custom fonts that you can add. You would be surprised to know that there are many websites available that offer free web fonts to add to your website. Some of these places are Google Fonts, TypeKit, FontSquirrel, and Fonts.com.

All of these websites have free and premium fonts available that you can download directly to your computer. Then, you can add these to your website using FTP, SSH, or cPanel.

There are even websites available that help matching the font design with the colour palette you use for your website. One such website is called the Font Pair. It helps designers create attractive matches of website templates and website fonts.

Now let’s discuss various ways to add custom fonts to your WordPress website.

Adding Custom Fonts Using Easy Google Fonts Plugin

You can easily add Google fonts to your WordPress website using the Easy Google Fonts Plugin. The plugin allows website owners to easily add Google fonts to any website without a plugin. It is completely customizable and you can view the fonts on your WordPress website without adding them first through the preview button. It also allows you to easily change the typography of your website and make changes to the fonts added to pages and posts. You can create font rules and change the CSS stylesheets all through the same plugin.

Adding Custom Fonts Using Google Fonts Typography Plugin

Another plugin that you can use to add fonts to your WordPress website without coding is the Google Fonts Typography plugin. It allows you to make changes to your website code using a GUI setup. You can add over 900 fonts to your website and use the Live Customizer preview functionality to see the fonts in action. The font doesn’t require delving into code and works with all top free business WordPress themes without a problem. The team behind the font plugin is also very supportive and offers timely updates and solutions to your problems.

Make Your WordPress Website More Attractive with Custom Fonts. Get In Touch Today

Manually Add Google Fonts in WordPress

The second approach requires making changes to the WordPress code. If you don’t want to install a WordPress plugin to your website, then you can use the manual method. Here is how to add Google fonts manually.

1. Go to Google Fonts website and find a font that you think will work best on your website. You can preview the fonts in different sizes right on the website.

2. Directly import the code to your WordPress website once you have finalized the font.

embed font

3. You will need to make changes to the functions.php file. Make a PHP function for importing the font. Copy the following code to your functions.php file.

Note: make sure that you properly back up your data before you change the functions.php file. One wrong change can lead to a server error.

<?php
function wpb_add_google_fonts() {
   wp_enqueue_style( 'wpb-google-fonts', 'https://fonts.googleapis.com/css?family=Playfair+Display|Space+Mono|Stint+Ultra+Expanded&display=swap', false );
   }
   
   add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );
?>

Make sure to change the link of the font to the one you have selected for your website.

4. Change the style.css file of your theme. Open it and add the following code to it.

body {
   font-family: 'Stint Ultra Expanded', cursive;
}

h1,
h2,
h3 {
   font-family: 'Playfair Display', serif;
}

button,
input {
   font-family: 'Space Mono', monospace;
}

That’s it. You have successfully added a font manually to your WordPress website.

Adding Custom Fonts in WordPress Using Typekit

If you are interested in adding Adobe fonts to your website, you can add them using Typekit. Typekit is a free font service by Adobe just like Google fonts. It has its own variety of fonts that you can add to your WordPress website simply by signing up with Adobe.

 Adobe fonts

Add the fonts to your WordPress website by adding them to the header section. Simply go to Appearance > Editor > header.php file.
Now, paste the code found on the Typekit font page before the section.

You have declared the fonts. Now you can use them in your site styling by using the following CSS code.

h1 .site-title {
font-family: gilbert, sans-serif;
}

Adding Custom Fonts in WordPress Using CSS3 @font-face

If you don’t want to call the fonts from Google or Adobe servers, then the best method is to directly add these fonts on your own server and call them using the CSS3@font-face.

  1. Download the fonts to your local drive and then upload them to the hosting server using FTP, SSH, or cPanel.
  2. Once you have the fonts uploaded to the drive, you need to call them in the stylesheet. Here is the code that you can use.
@font-face {
    font-family: Arvo; 
    src: URL(http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf); 
    font-weight: normal; 
}

Just make sure to change the font-family name and url to the font name that you are using.

Once you have the font declared in your stylesheet, you can use it anywhere with the following code.

.h1 site-title {
font-family: "Arvo", Arial, sans-serif;
}

Now you have all the methods available for using web fonts on your WordPress website. With that said, it is still a better option to use fonts directly from the fonts’ server instead of your own for optimal performance. Both Google and Adobe servers are one of the fastest in the world and your website won’t get server interruptions if they are loaded directly from their own servers.

WordPress Plugins for Better Typeface

Typography is the key component, though some of you may ignore it. Nevertheless, use of incorrect or irrelevant typeface or fonts will surely leave a bad impression of your business among your targeted audiences and customers. To get rid of such problem, you need to pay more attention in the typeface.

For your ease, find here WordPress plugin for better typeface:

Use any font

WordPress plugin Use any font provides the freedom to utilise any font within your web presence. Unlike other font implement service, you can easily utilise any kind of font without depending on the uptime of another server. You simply need to upload your desired typeface to your WordPress and employ it.

Features

  • Simple and quick to set up
  • Browser-friendly
  • Quick font-assign interface
  • Utilise uploaded font directly from Editor
Use any font

Font-resizer

Font-resizer lets you give audiences of the website the option to update the font size. This plugin works on jQuery and saves the setting within a cookie, which allows an audience to notice same font size when they visit your site again.

Font-resizer

Typekit for WordPress

WordPress plugin Typekit for WordPress provides a capability to integrate the Typekit typeface service within the online presence in less time. You only have to choose one font among thousands of font obtainable on the Typekit and utilise it on your WordPress site together with proper license and access. Additionally, this plugin also allows you to produce your own CSS rules to utilise Typekit typeface without editing or uploading CSS style sheets.

Typekit for WordPress

Google Typography

This plugin Google typography lets you utilise the Google Font for any text on your current online presence without a single line of code. You only have to add and customise the font you like to employ in Appearance> Typography setting page and use it with HTML tag or through CSS selector.

Google Typography

Font Squirrel

WordPress plugin Font squirrel counts on the best resource to find a free good quality typeface for both business and personal purpose. It lets you select any font from the website, download it and simply employ within your WordPress website.

Font Squirrel

Simple pull Quote

This plugin Simple Pull Quote benefits you with a simple approach to insert quotes with your post as well as the page. It inserts ease to use “Pullquote” button for both HTML as well as TinyMCE editors.

Simple pull Quote

Initial Letter

Together with tabbed spacing to start a new paragraph, you can use a larger font to the initial letter of the first paragraph for all your posts. This plugin Initial letter also allows to put in style option which allows updating size, colour and typeface then apply the style to the entire paragraph.

Initial Letter

Wrapping Up,

WordPress offers the number of plugins; you can find a suitable plugin that matches the typography of the WordPress website. In this article, I have described some of the WordPress plugins which will help you to use your font in a better way. Furthermore, these plugins will surely be helpful to manage, highlight and display fonts on your website.

Unable to Customize Website Fonts? Get Help from WordPress Experts!

If you are unable to add customized fonts to your website, our WordPress experts can help you change the design of your WordPress website or create a custom theme for your website – whatever you want to be done – so that you can become more profitable.

Get in Touch Today


Updated on: 12 February 2021 |


Nirmal Gyanwali, Director of WP Creative

Nirmal Gyanwali

With over 16 years of experience in the web industry, Nirmal has built websites for a wide variety of businesses; from mom n’ pop shops to some of Australia’s leading brands. Nirmal brings his wealth of experience in managing teams to WP Creative along with his wife, Saba.