Skip to Main Content

How to add custom fonts to WordPress

Divi: the easiest WordPress theme to use

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

Would you like to add custom fonts to WordPress?

Believe me, the police also a very big role to play on your blog and you will gain a lot by adding a font adapted not only to the context of your blog, but also to your WordPress theme.

In this tutorial I will show you how to add custom fonts to your WordPress blog using Google Fonts, Typekit And CSS3.

Using custom fonts in WordPress themes has become common. In fact, there are several WordPress themes that offer multiple fonts to choose from. However, loading all of these fonts at the same time can significantly slow down the loading of a page.

how to add custom font wordpress 1 1

And if your blog is slow, I suggest you Some solutions to performance issues on WordPress

This is one of the reasons why we are going to do it the right way, uploading only the custom font we want to use on the blog.

But first of all, it is first important to know how to search for fonts while also consulting the 7 WordPress plugins to take in hand the typography of your blog

How to find fonts and how to use them on WordPress

Fonts are not as scalable as they used to be. However, there are several sources where you can find fonts such as " Google Fonts "," Typekit "," FontSquirrel "And" Fonts.com ».

How to add a Google Fonts font to WordPress

Typography WordPress fonts google

Google Fonts is a very large library of free fonts that you can use in several projects.
All you need to do is access " Google Fonts And select the font of your choice. Then click on " select this font »A tab appears at the bottom right of your screen.

Google Fonts typography wordpress tutorial

Click on this tab which expands as in the image above. You can customize the style of the font to include by clicking Customize. You only have to select the style you want to see on your blog.

You should then scroll down to the " Embed ". You will then need to copy the code located in the section " STANDARD ". It is this code that you can add on the " header Of your child theme.

That's all there is to add a new Google Font to your WordPress blog.

How to add a font using TypeKit

Typekit is another free and premium service that offers fonts that you can use also in your different projects. They offer premium subscriptions and free subscriptions.Typography WordPress fonts typekit 2

You just need to have a Typekit account and create a new " Kit ».

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

Typography WordPress fonts typekit

You will then have to select the font from the Typekit library and add it to your project. After that, grab the code for your kit and add it from your dashboard.

Typography WordPress fonts typekit 1

To add it to your dashboard, you simply need to install and activate the plugin " Typekit Fonts for WordPress ».

After its activation, you simply need to access the " Settings> Typekit Fonts And paste the code from your kit into the " Custom CSS rules ».

Typekit-paste-un -kit

The font can then be used in the same way, that is to say by specifying the name of the family for specific elements or for the whole document.

How to add a font using the CSS3 (@ font-face)

The most direct way to embed a font in your blog is to add it using "font-faces" via CSS3. This method allows you to add any type of font you want on your blog.

The first thing to do is to download the font of your choice in web format. If you don't have this font in web format, then you can convert it for free at " FontSquirrel Webfont Generator ».

Once you have the files in the format " website », You will then have to send them directly to your server. I strongly recommend that you add it to the " fonts Of your child theme using an FTP client (fileZilla Is my recommendation).

If you want to go further in this procedure, see our tutorial on How to use FTP on Windows 10

Let's go back to our goal.

Once it's done, you can integrate the font like this:

integration-Police

To use it anywhere, you will simply need to define the name of the font as you specified in the " bottom-face »Previous (see value of the font-family attribute ).

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

Use code-font-face

That's all there was to know about using CSS3 code. However, I must specify that the method with the "font-face" functionality is more suitable for developers.

Other solutions and tools are also used and recommended to manage or manipulate the fonts on your website.

Discover also some premium WordPress plugins  

You can use other WordPress plugins to give a modern look and optimize the grip of your blog or website.

We offer you here some premium WordPress plugins that will help you do that.

1. CommentPress

CommentPress is a powerful WordPress compact plugin that lets you insert, edit and delete comments quickly and easily. CommentPress uses Ajax, jQuery and PHP to give visitors the ability to insert comments without having to reload the page.CommentPress Ajax Comments Insert Edit and Delete Comments

This plugin has many customization options, finally giving it the look and feel you want. It has a captcha to block spam and brings to your comment section more security.

Its main features are: the easy insertion of comments, the possibility for users to reply to specific comments, the pagination of comments, complete management of the administration of the comments section, buttons for easy insertion of images, videos and links, a fully responsive layout, a Captcha to secure the form and avoid spam, and much more.

Download | Demo | Web hosting

2. Everest Gallery

As the name suggests, this is the pinnacle of premium WordPress photo gallery plugins. This ultra-customizable tool will allow you to create galleries of any style in just a few minutes.

Everest Gallery Responsive WordPress Gallery Wordpress plugin

Everest Gallery can be used to present articles, types of personalized publications, custom taxonomies / categories, WooCommerce products, personalized products, image galleries and attachments, videos, product features, customer showcase, portfolios, team members, screenshots, etc…, fully responsive.

Everest Gallery comes with full documentation, and more than 30 options to completely customize the look of the gallery. With the customization options available, you can use this WordPress plugin to present anything easily and efficiently. 

Download | Demo | Web hosting

3. WP Media Manager

WP Media Manager is one of the best and most powerful WordPress media library management plugins. It is excellent at managing folders and its ease of use allows you to organize your thousands of media files.

WP Media Manager The Easiest WordPress Media Manager Plugin

Simply use the drag and drop method to insert media files into folders / subfolders. This ability not only improves file management, but also allows you to manage folders. This is usually a must for novice users.

This WordPress plugin has features such as creating folders, filtering them, 3 beautiful responsive galleries, the ability to duplicate files, creating an unlimited hierarchy and many more ...

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

Download | Demo | Web hosting

Other recommended resources

Go further in using custom fonts in WordPress by also consulting the links or recommended resources below.

Conclusion

Here ! That's it for this tutorial on the best way to add custom fonts to WordPress. If you have any suggestions or comments, they will be most welcome.

However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.

Nespecially hesitate to share it on your different Social networks. If you have some Comments or suggestions, do not hesitate to tell us in the section reserved for these.

... 

This article features 0 comments

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
10 shares
Share6
tweet
Save4