Introducing | Kaon — Creative Website Builder for WordPress & WooCommerce

Home How to Add Custom Fonts in WordPress (3 Easy Methods)

How to Add Custom Fonts in WordPress (3 Easy Methods)

Learn how to add custom fonts in WordPress and stun your users aways with much beauty and grace on your website.
How to Add Custom Fonts in WordPress (3 Easy Methods)
Learn how to add custom fonts in WordPress and stun your users aways with much beauty and grace on your website.

How to Add Custom Fonts in WordPress (3 Easy Methods)

Typography is a prime component that can either make or break your website design, thus the reason we emphasize its importance on every single piece of design we create. There’s a wide variety of awe-inspiring fonts that you can use to create beautiful combinations. In WordPress, you have access to the large repository of free Google Fonts and you can attribute them to any element on your website design. 

But why limit yourself to only his category, where there are thousands of beautiful and elegant custom fonts that you can add. By default, WordPress does not allow the inclusion of custom fonts, but for this article, we will discuss the three popular approaches to add custom fonts in WordPress with ease. Your choice of typography will affect how your website looks and how it will be presented to others. 

It can make you stand out from the crowd and elevate your designs like no other component. Dare to be a little creative with these custom fonts instead of playing it safe with typefaces that everyone uses, and the results will stun you and your users. Custom fonts are considered those fonts not included within your content management system, in our case WordPress. 

There are thousands of beautiful custom fonts online, both free and premium, that you can use on your website, once you get the hang of how to add custom fonts in WordPress, using our comprehensive guide. Follow us along. If you are keen on typography we have made a wide collection of free fonts and typefaces, based on their type and specification, you can find free serif and sans serif fonts, free modern fonts, handwritten fonts, block fonts, and more.

Where to Download Free Custom Fonts Online?

You can find various online resources to download free custom fonts online, each of them presenting unique typefaces and fonts that you can use on your website. The most popular choices for downloading free fonts are Google Fonts, Font Squirrel, DaFont, Font Space, and more. You can find all the most popular resources in this article. Note that before downloading a free custom font to your WordPress website you must first check the font’s license. You should know that some of the free fonts are available for personal projects only, and to use a custom font for your commercial projects you will need to buy the license. 

Pairing fonts is a form of art on its own, you can combine two or more fonts to collide onto your website design and present your content in such a beautiful manner, always keeping in mind readability and user experience. Choosing fonts that are hard to read or too ambiguous can hurt your bounce rate as users will not be able to understand a single thing on your website. But when used right, with custom fonts in WordPress you can design the most exquisite websites to grab the user’s heart and attention. Like this example of a photography homepage used in our ethereal Merope WordPress theme.

Custom Fonts in WordPress Example - Photography Website

You can notice the major impact typography plays on your website’s design, but to stay on good terms with your site’s performance as well, we would suggest you not take it too far with custom fonts as they slow down your website. This way you maintain consistency across your website and also present a strong and capable website that excels in performance as well.

The Main Font Formats and their Difference

When downloading and adding custom fonts to your WordPress website there are a few other things that should be considered. First and foremost, not all browsers support all custom fonts, depending on the font format they introduce, you might have difficulties displaying your wonderful design on every web browser. Let’s see the main font formats and what makes each format different. 

  • Web Open Font Format (WOFF) – WOFF is a font format that is used in web pages. 
  • Web Open Font Format (WOFF 2.0) – is implemented in all major browsers, and is widely used on production websites. It supports the entirety of the TrueType and OpenType formats. 
  • OpenType Font (OTF) – OTF fonts are also a joint typography project created by Microsoft and Adobe in an effort to create cross-platform typefaces. OpenType fonts are an extended version of TrueType Fonts. 
  • TrueType Fonts (TTF) – are the basic fonts created by Apple and Microsoft and EOT and are the most commonly used format. 
  • SVG Fonts/Shapes – this type of format is used to embed glyph information into SVG to display font text. 
  • Embedded OpenType Fonts (EOT) – this type of format is a compact form of OpenType fonts supported only by Microsoft Internet Explorer. Make sure to use this format to support IE.

The most popular font format that is widely used and supported on all browsers is OTP and TTF, so whichever font format between these two your custom font is attributed to will have your design look splendid for every user across all browsers and devices. If you, we would recommend you convert your custom font to a web-friendly format. You can use online tools like Webfont Generator, where you can find the fonts converted in a web-friendly format alongside the CSS files. 

Video Tutorial: How to Add Custom Fonts in WordPress

Everyone learns in different ways, that is why we have also included a video tutorial on how to add custom fonts to WordPress using the power of Neuron Builder that gives you the possibility to add custom fonts without using an extra third-party plugin nor adding custom code to your WordPress website. It’s a type of “best of both worlds” kind of solution without affecting the performance of your website whatsoever. Please refer to the video to see how to add custom fonts in WordPress.

If you prefer the written approach, then please continue reading our comprehensive guide and learn how to add custom fonts in WordPress either manually or using the help of a plugin. Which method you use is mostly dependent on your coding skills and how comfortable you are with editing your website’s core files as well as the impact that an extra WordPress plugin will have on your website.

How to Manually Add Custom Fonts in WordPress

The first method we are going to explain here is how to add custom fonts in WordPress by integrating code to your theme’s stylesheet. You might decide on this approach if you do not wish to overburden your website with many plugins, but we would recommend you take good caution before you make any changes to your site’s core files. 

That is why it is best if you take a full backup of your WordPress website, just in case things go sideways, you can go back to a certain change on your website. To get started you will need to upload your font’s file into your theme’s folder. To do that, you will first need the font file.

Custom Fonts File

Now, because WordPress doesn’t provide a dedicated fonts folder you will need to create one. You will simply need to log into your FTP client or cPanel account to perform such a task. Next up, locate the themes folder, even though you can create the folder wherever you want, it is our recommendation you create it inside the theme’s folder. Right-click with your mouse and click on Add New Folder option. Name your folder, for proper organization, name it something like “fonts”. Now you must upload the font’s file into this new folder you created, like so

Create the fonts folder in your theme file

Once the folder is uploaded and in place, it is time you head over to your WordPress Dashboard. Go to Appearance > Theme Editor. Now you must locate the stylesheet.css file, scroll down and paste the following code. 

Write code to add custom fonts in WordPress 1
@font-face {
font-family: Custom Font;
src: url(http://www.yourwebsite.com/wp-content/themes//fonts/your-new-font.ttf);
font-weight: normal;
}

The code presented above will call on the font so that you can use it on your website. Please note that we have added placeholder text for demonstration purposes. Make sure to replace the text with your actual information. 

Update the file to add custom fonts in WordPress

Once you’ve added the font make sure to click on Update for the changes to take place. Although the code you’ve added paved the way for custom fonts to be included on your WordPress website, you still did not attribute the font to elements on your website. To do that, you will once again need to add code to the same stylesheet.css file, only now this is the snippet code you will add

.site-title {
font-family: "New Font", Arial, sans-serif;
}

Here too we included placeholder text, in such case you will need to make the necessary changes that are applied for your font. With this example, we attributed our new custom font to our site’s title. However, you can make all the changes necessary according to your needs and attribute the font to whatever element you want. 

Add Custom Fonts using a WordPress plugin

The other approach to add custom fonts in WordPress is by using a plugin. The easiest and simplest way to extend any functionality to your WordPress website is to utilize the powers of a plugin.

For those who are managing their WordPress website and still haven’t got their way around code and markup languages, the first approach will be too technical and you risk messing up your website. In such a case, this second approach is the easiest and the safest way to go. The choice of the plugin will be depending on the custom font you want to add. We will first show you how to add custom fonts in WordPress using the Custom Fonts plugin. 

First things first, you will need to install and activate the plugin for it to appear on the WordPress dashboard. To locate the plugin from the WP Admin area, click on Appearance > Custom Fonts. There you will be presented with an interface to upload all your favorite custom fonts.

Use the Custom Fonts WordPress plugin 1

Make sure to include all the necessary information as well as upload the compatible font file format. Type in the name of the font, choose a fallback typeface in case the custom font can not be displayed (like the case of incompatibility between the font format and the browser). 

If you wish to include more than one weight/variation of the font click on the Add Font Variation button and once again set the font-weight and upload the appropriate font file format. 

When you are done adding all the weights and files you need, click on the Add New Font button. You will see your font appearing on the font’s list on the right side of the screen.

The custom fonts saved on your website
But if you intend on including custom Google Fonts, then the Easy Google Fonts plugin will be the most suitable option for you. Upon installation and activation of the plugin, click on Appearance > Customizer. This will have you open the live theme customizer where you can configure your site’s design and main components. From the list, you will see a new section that’s added upon the plugin installation, it’s the Typography section. 
Add Custom Google Fonts with Plugin 1

If you click upon the Typography section, you will the introduced to the many sections on your website. Choose to edit one of them and click to change its typography settings. Simply click on Edit Font below the section you are editing. 

Edit text to add custom fonts

Under the font family option, you can choose any of the Google fonts that are available on its repository and edit the heading or the text you wish to configure on your website. You can also tweak the font style, the font zie, padding, margin, and more. Click on Publish to save the changes and you’ll be good to go. 

Choose from the list of custom google fonts

How to Add Custom Fonts with Neuron Builder?

One last resort to add custom fonts in WordPress is by using the powerful Neuron Builder that comes bundled with our Neuron WordPress themes and presents a revolutionary way of building and designing websites. The themes come bundled with a wide set of fonts made of over 977+ google fonts and texts as well as the freedom to select color, line height, letter spacing, transforming a text or font size. 

But if you are looking for something more unique to spice up your designs, nothing can top off a custom font, that is why we’ve made it possible for our users to add their own custom fonts without trouble. The best of this approach is that you don’t have to install third-party plugins nor add code to your website whatsoever. It is all ingrained in the powers of Neuron Builder that come bundled with the theme. 

To begin adding a custom font in WordPress with Neuron Builder, from the WP Dashboard click on Neuron Panel > and click on Custom Fonts. This is where all the fonts you download will be displayed. Click on Add New button at the top of the page

Add custom fonts with Neuron Builder

After that, a new page will pop up, here all you have to do is upload the file you have from your computer. First, go ahead and name the font to find it easier later, then click on Add Font Variation.

Add font variation 1

Now, name your font, because this way you will be able to better recognize and organize your custom fonts category. Now from here, it is important to add the font’s weight and style, depending on the variation that the font offers. 

Please make sure to include the correct information. You also have the different types of font formats you can upload our files to. It is crucial finding the right one to upload, depending on the format that your font file comes in. Choose the respective font format and upload it from your computer.

Upload the font file in WordPress

You can also add the font variations, what you will need to do is first examine how many font styles and weight the font supports, and upload them each time by selecting their style and weight as well as uploading the correct format file from your computer. Once you are done with this process. Once you are done hit Publish for the changes to take place. Here you will have saved all the fonts you download with the options to either Edit or Delete them.

Now every time you edit a page text, whether that be a heading, a title, or text, your custom fonts will appear on the typography settings. From the font family, you will first see the custom font you added, with the proceeding Google fonts that the themes come included with. 

Preview the custom fonts in WordPress 1

You can also tweak the font size, weight, style, and other settings as per your desire. Once your design is completed, click on Publish or Update and you will see your custom fonts live on your website. 

Final Thoughts

We’ve come to the end with this article and hopefully, it shed some light on the topic of how to add custom fonts in WordPress. The three approaches we shared in this tutorial are a comprehensive guide on including custom fonts in your website to elevate your designs. You can choose either one that you feel comfortable with as well as decide on what to prioritize on your website. If you have absolutely no idea how to deal with custom code, the plugin approach would be best recommended. 

But do you really want to overburden your website with tons of plugins? In this case, the third approach seems to curate both solutions, but you will need to buy one of the masterfully crafted Neuron themes to obtain the powers of Neuron Builder. Either way, you choose, our tutorial will come in handy and will show you step-by-step how to add custom fonts in WordPress in the smoothest way possible. Leave in the comments below your preferred method of adding custom fonts to your website.

By Snowy Smith

Director of product design, Freehand

Introducing Kaon WordPress Theme