How to integrate fonts on WordPress?

Fonts are the showcase of your theme. If they are attractive enough, they can make your website professional and optimize the user experience

On the other hand, if they are too “ugly”, your site can look boring and have a bad user experience

• So, how do you find good fonts?
• How do you integrate them on WordPress?
• How to change their color and size on WordPress?

If you have ever asked yourself any of these questions, then ask yourself and continue reading this mini-guide.

Let’s get started!

Chapter 1: Why use custom fonts and how to add them on WordPress?

1.1. Why use custom fonts for your website?

WordPress offers themes with built-in fonts by default. While these fonts are great and quite nice, integrating them yourself with your own personal touch can have quite a few benefits for the site

Here are some of them:

• You can customize the theme to your liking

If you are not really enamored with the basic theme of your site, you have the possibility to customize your fonts yourself and get a theme that would suit you best

• You stand out from the competition

Customizing your fonts makes your design different from your competitors who are content with the default WordPress fonts

Many WordPress site owners are content with the default fonts and design that the CMS offers them

In itself, this is not a bad thing. However, if you want to make a difference between your site and that of your potential competitors, customizing the fonts of your theme is the best solution.

• Your site design will improve

If you choose the right fonts, the overall design of your site will get a facelift, which is a big step towards optimizing the user experience

It is clear that most visitors will enjoy spending time on an optimized site with a captivating appearance. This is not the case for a site with fonts and a general theme that they get tired of.

Now, how do you integrate these custom fonts into a WordPress site? That’s what we’ll see in the next section.

1.2 How to add custom fonts to a WordPress site?

Here, I will show you 3 methods to customize your fonts on WordPress. You can choose between:

• Use web fonts;
• Add fonts manually
• Hosting fonts on your site.

It is important to note that these are not the only methods to customize your fonts. There are others, but I preferred to show you the most popular and easy to access ones

Now let’s see how each of these options works

1.2.1. Web fonts

Using web fonts is the most common way to add fonts to a website. There is a wide range that you can use to customize the look of your site

First, let’s move on to an explanation of the term:

1.2.1.1. What is a web font?

Web fonts are fonts hosted by an external provider. That is, they are stored on the provider’s website. To access them, you don’t need to download them

You just need to encode a link to the provider’s site to retrieve the fonts and use them directly on your site. You also have the option of using an extension to save yourself the ordeal of coding

However, it is very important not to confuse web fonts with web-safe fonts. Web-safe fonts exist as a backup plan. They are only displayed when the site visitor cannot connect to the font you have defined for your site.

This may be because the provider’s server is unreachable or the visitor’s browser is outdated and does not support the custom font

1.2.1.2. Why use a web font?

The advantage of using web fonts is that you have access to a multitude of fonts without necessarily hosting them on your site or locally on your computer

You will save much more time creating a few lines of code or installing an extension rather than downloading and then uploading font files

Plus, when the provider in question needs to make updates to their font lineup, you’ll have immediate access to the updated versions of the font files you selected

Quite flexible, isn’t it?

1.2.1.3. Where to find web fonts?

Most popular providers work without the need for a subscription. However, fonts can be paid or free, depending on the provider

The most popular providers are :

• Google Fonts

Google Fonts is the leading provider of web fonts. It provides you with an extra large range of free web fonts

You can also save the fonts on your computer and use them for your offline documents for free.

To add web fonts to your WordPress site from Google Fonts, one of the easiest ways is to use the Easy Google Fonts

You will only have to download the plugin and insert the fonts from the “font family” Google Fonts in the typography tab of the dashboard ”Appearance” and ”customization” of your WordPress.

Once this step passed, click on ”Save and Publish” to activate your changes.

• Fonts.com

If you are looking for high-end fonts, Fonts.com is the best option available to you. This paid provider provides you with high quality fonts

• Adobe Typekit

Adobe Typekit requires a bit more reserve than Google Fonts. It’s a marketplace for professional typographers, but there’s plenty for amateurs to enjoy as well

Adobe Typekit also offers a large number of free fonts for those who do not want to invest and access the premium options. Access to this font database just requires registration.

To use Adobe Typekit, go to the search bar from the home interface and search for “kits”

On the next screen, select the “Create a new kit” option. You will be asked to enter your site’s domain name as a ticket for the next phase

You will then be provided with a javascript that you should save in a small text note on your computer.

Your kit is now ready. Now you can browse the Adobe Typekit collection and add any fonts you like to your kit. The next part is the encoding on the interface of your WordPress site

Remember the javascript snippet I asked you to save?

Now is the time to paste it into your theme’s header.php file in the Appearance and Editor tabs

Then click on “Update file” and that’s it. You will be able to add other Adobe Typekit fonts by editing your stylesheet.

As mentioned above, there are plenty of font providers, we just saw the most popular ones

With all these providers, you can directly integrate fonts into your publications by creating lines of code or by using an extension that you install on your WordPress site

Also, it is good to remember that providers like Google fonts offer you the possibility to have a preview of the result you will get after having definitively opted for this or that font.

1.2.2. Adding fonts manually

The second option I suggest to customize your fonts on your WordPress site is to add them manually to your site

These can be web fonts or fonts that you host locally on your computer.

To manually add web fonts to your site, you will need to create lines of code for your function sheet and your stylesheet

If you are using a custom theme, modifying the function sheet and the stylesheet will certainly not cause you any trouble

However, if you are using a WordPress theme, you will necessarily need to recreate your theme

So let’s see the steps to add web fonts manually:

• Select a font

First of all, you need to select a font of your choice and retrieve its link.

• Embed the link of the chosen font

The second step is to integrate the copied link into the function sheet of your theme. To do so, you have to replace in the function file, the link of the existing font by the one generated by the provider and that you have initially copied

You have just queued your font. It will not work immediately. You must go to the next step.

• Add the font to the style sheet

In order for the font to work on your site, you must add it to the stylesheet of your site

To do this, add the code to apply the fonts to your style.css file file and select the element you want to style (the body of your text or the heads).

Finally, save the modified stylesheet and check if your changes work on the site

If all this seems complex, here is a video

However, it would also be a good idea to add a emergency font or web-safe font in case one of the visitors of your site would not be able to access the font you have applied

Hence the importance of having an optimized, well designed and mobile-friendly site. I will show you below how to download and convert font files.

1.2.3. Hosting fonts on your blog

Another way is to host fonts on your site’s server. One of the advantages of this method is that you have the monopoly of the security of your site : no link to a third party.

The fonts to be hosted are web fonts available for download on the provider sites. You still have to check if the license of the provider site allows you to do this

You can also host fonts locally, upload them to your site and insert them into your stylesheet without queuing them in your function file.

This means

• First, download the fonts of your choice from a supplier site. To be able to use these font files on your website, make sure they are in the woff format. If necessary, you can use a format converter to make them usable. We will come back to this in more detail in the next chapter
• Then, you will have to upload all the downloaded font files to your theme folder. It would still be wiser and tactical to create a sub-folder named ”fonts” or ”fonts” in your theme folder where all your font files will be found. This is a point of more in the customization and optimization of your WordPress site
• Finally, you will only have to integrate the fonts to your style sheet by following the same process and see your site change its appearance subliminally.

Now that we’ve explored these various options available to you for customizing your fonts, I’ll share with you how to convert your font files

In order to manually embed fonts on your WordPress site, you must necessarily download them first and upload them to your site. You also need to make sure that these files are in the right format

To do this:

• Start by visiting the supplier site you have chosen
• Then select the font that suits you
• Go to the “License and Use” section of the site to find out if you are authorized to download and use this font file
• Click on the “download” tab and save the zip file locally on your computer;

• Then open the zip file on your computer to extract the fonts. Generally, you will find them in WOFF and WOFF 2.0 formats

Now that you know how to integrate fonts into WordPress, let’s see how you can modify them yourself at any time.

Chapter 2: How to modify your fonts on WordPress

2.1. Modifying your fonts on WordPress

You have the possibility to modify your fonts and you can do it in different ways:

• Use the block editor or the classic editor;
• Use the WordPress customization tool;
• Make changes in posts;
• Make changes in your stylesheet.

2.1.1. The Gutenberg Block Editor

With the Gutenberg block editor, you can change the style of the text in your post or on your page. To do so, select the part you want to modify

Source kinsta.com

A small menu will appear, click on the icons that appear to edit your text. You can put the text in bolditalic, in italic, the underlinedetc.

2.1.2. The classic editor

The classic editor is present in older versions of WordPress and includes a toolbar where you can easily modify your texts.

Source kinsta.com

2.1.3. The WordPress Customization Tool

In the customization tool, you can modify the text by adding a manual CSS. To do this, go to the customization tab and click on “Add additional CSS”

Then fill in the dialog box with the CSS you want to add.

2.1.4. Make changes in the style sheet

For this scenario, if you are using a default WordPress theme, you will need to create a child theme

In this child theme, you will have to create a new stylesheet where you will integrate your new font style.

In case you are using a custom theme, open your theme folder wp-content/themes and modify the CSS in the file style.css.

2.2. how to change font colors on WordPress?

You can also change the color of some texts on your site with the same methods as for changing the font style.

2.2.1. Gutenberg Editor

The Gutenberg block editor allows you to change not only the color of the text, but also its background. To do this, you must

• Open the frame;
• Go to the “Color Settings” tab
• Then select the color palettes you like to change the color of your text blocks and their background.

2.2.2. The classic WordPress editor

The classic editor of older versions of WordPress also offers you the possibility to change only the color of the text you have selected

2.2.3. Theme Customization

Some themes allow you to change the colors of your site. But you must first add CSS in the customization tool to be able to change the colors

Click on the “Add additional CSS” tab in the customization section and enter your CSS in the text box.

Source kinsta.com

2.2.4. The style sheet

The style sheet also allows you to change the font colors. But to use it, make sure you create a child theme and a new stylesheet if your theme is a default theme.

As for the font size, you can also change it with these different methods. Be careful though, because if your paragraphs differ too much in size, they will look inconsistent and difficult to read

For colors, if the combination makes it difficult to access, you will receive a warning from WordPress. Also note that if the colors are too much, your site will not look really professional, which will certainly disappoint your visitors.

Speaking of ”pleasing your visitors”, I will show you in the next chapter how to choose the right fonts to integrate on your WordPress site.

Chapter 3. Best practices for finding good fonts

It is good to customize your fonts. But it’s even better to choose and apply the right fonts

As I said above, fonts are the showcase of your theme. They reflect in one way or another the image of your website.

3.1. Things to consider when choosing your fonts

The first thing is to choose according to the image you want to give to your site or your brand. You should also focus on:

• Readability if the font is not very visible or illegible, the interface of your site will be unpleasant and visitors will also get tired of reading you because of the bad choice of font.
• Font size choose a font with a good size to make your blog more pleasant to navigate.
• Line spacing and spacing between characters spacing: It is common knowledge that the internet flow is now held by smartphones. Imagine reading a blog post with characters that are hard to discern on your smartphone

It’s also important to get the font mix right. You can choose fonts from the same family or pick the ones that interest you

So know how to make the right combination to not weigh down your theme or miss your customization. There are also several online tools like Fontjoy or Fontpair to help you create the perfect combination.

3.2. Tips for choosing

It is not very easy to make the right choice that can both please you, your visitors and make your WordPress ”beautiful” as the English would say

To help you, here are some tips that should guide you to a good choice of font:

• Look for fonts on your printed documents that are interesting enough to be used as web fonts
• Choose the most popular fonts from font banks. They are used by a large number of people, so they are familiar to Internet users.
• Visit your competitor’s sites and see what they have to offer in order to better respond.

Take the time to experiment with your choices before applying them to your site. Also, avoid queuing up variations of fonts you don’t use or hosting fonts you don’t use on your site

Also make sure that the fonts you use are properly queued.

Chapter 4: Other questions about WordPress fonts

4.1. How do I embed a custom font on WordPress?

There are a variety of options to do this:

• Code web fonts in your theme and use them ;
• Install an extension on your site that allows you to use web fonts;
• Add manually from a local source fonts previously downloaded;
• Hosting fonts on your WordPress site.

4.2) How do I upload the font via the file manager in WordPress?

To upload your font using the file manager, follow these steps:

1. Go to your cPanel website;
2. Go to the File Manager;
3. Go to wp-content/themes/your-theme/fonts (or create a font folder if one does not exist);
4. Download the zip file of the custom font;
5. Unzip the font into the folder ;
6. Make a note of the file path, as you will need to reference it in your CSS.

4.3. How to add your custom font to your theme?

This requires you to reference it in your styles.css document and specify where you want it to apply.

If you haven’t already done so, make sure you are using a child theme so that your custom CSS isn’t lost in theme updates. We talked about this in Chapter 2.

You can add custom CSS to your website to reference your new font. To do this, you have two options:

• Use the WordPress editor;
• Use the file manager.

4.4. What fonts can be used on the Web?

Technically speaking, you can add just about any font to any website.

However, when looking for a font online, you should always keep in mind the price, the license agreement and the installation method.

Without further ado, here are some of the most popular font libraries that can help you find the perfect font

• Google Fonts (FREE) ;
• Adobe Fonts (Premium) Adobe Fonts (formerly Typekit) ;
• Font Squirrel.

4.5. What are the different font formats that exist?

It is time to know the different types of fonts that exist. It is important to remember that each type of font has a different extension and a different compatibility with a range of browsers.

• TrueType font (TTF);
• OpenType font (OTF);
• Web Open Font Format (WOFF);
• Web Open Font Format 2.0 (WOFF2);
• Embedded OpenType font (EOT).

4.6. How are font formats supported by browsers?

Over the past few years, modern browsers have significantly improved the way they support custom fonts. But even today, not all formats are supported on all browsers.

Here are the most popular browsers and the font format they currently support:

• TrueType font (TTF): Compatible with Internet Explorer version 9.0 and above, Chrome from 4.0, Firefox from 3.5, Safari from 3.1 and Opera from 10.0 ;
• OpenType Font (OTF): Has the same browser compatibility as the TrueType font;
• Web Open Font Format (WOFF): Works with Internet Explorer version 9.0 and above, Chrome 5.0+, Firefox 3.6+, Safari 5.1+ and Opera from 11.1 ;
• Web Open Font Format 2.0 (WOFF2): Works with Google Chrome since version 36.0, Firefox since 35.0 and Opera since 26.0 ;
• Embedded OpenType font (EOT): Works only with Internet Explorer version 6+.

Source w3schools

4.7. How to choose the right font format?

Web Open Font Format (WOFF) has become the industry standard font type because it contains additional metadata and uses less bandwidth to render.

However, it is often difficult to find WOFF versions of all fonts, and it is a font type used on modern browsers.

The fonts TTF and OTF fonts are easier to find and may be available if you can’t find a WOFF version of your chosen font.

In short, using TTF/OTF and WOFF will ensure that your fonts are supported by all browsers.

For more details on supported font formats, try Can I Usea great tool for checking feature compatibility between different browser versions (FREE).

In summary

Font customization is an important asset if you want to set your WordPress site apart from the rest

Although it’s not an easy exercise, it helps beautify your site’s theme or design and optimize the user experience

The choice of fonts is just as important as their format. So make sure you select the right fonts for your branding and change them as you wish

Also, make sure you use web-safe fonts or backup fonts in case visitors for one reason or another cannot see the fonts you have integrated

However, don’t overdo the changes. Your site could be difficult to access and your texts could be boring and difficult to read.

So now you know how to integrate and modify fonts on your WordPress site, how to modify text colors and also how to choose the right fonts to make your site attractive and professional.

Thanks and see you soon!