In this article, we will explain what custom fonts are and where to find the best options. Next, let's take a look at three ways to add custom fonts to WordPress.
What are custom fonts?
We will use this concept to refer to any font that is not in WordPress. To use, select those that meet the following criteria:
- Should be readable.
- Fit into the overall design of the site.
- Should be optimized for mobile devices.
Fonts are also involved in shaping the style of the brand. Therefore, the decision must be made as carefully as possible.
Where to Find Custom Fonts for a WordPress Site
There are many great font repositories out there. One of the best is Google Fonts . The service offers over 900 free fonts in multiple languages.
Adobe Fonts ( formerly Typekit ) is another great library that contains over 1700 different custom fonts. But you'll need a Creative Cloud subscription to access them .
3 Ways to Install Custom Fonts on a WordPress Site
WordPress allows you to install custom fonts in several ways. Let's consider each method in more detail.
1. Editing the theme file
Instead of manually adding custom font files to your site, you can download them directly from third-party repositories. To do this, in Google Fonts, open the page of any font and at the top of the screen, click the " Select this font " button:
After that, a new menu will appear with two code snippets. The first one looks like this:
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">Place the above code in the <head> tag in your child theme's header.php file . It is located in the theme folder you are using, in the public_html/wp-content/themes directory .
This code will load the selected font from Google Fonts. But in order to use it, you need to open the child theme's CSS file and specify which page elements the new font should use. For example:
font-family: 'Roboto' , sans-serif;Remember that this CSS file must be in the same directory as the header.php file .
2. Uploading the font file to the theme folder
If you pay attention to performance optimization, then upload the font files directly to your site. But first select the font file you want to upload to the server.
WordPress does not have a separate folder for fonts. But it can be created using an FTP client . It is better to place it in the theme directory so that it is visible. Then upload the font file to a new folder.
After that, open the child theme's CSS file and include the font as follows:
@font-face {
font-family: New Font;
src: url(http://www.yourwebsite.com/wp-content/themes//fonts/your-new-font.ttf);
font-weight: normal;
}Now we need to determine which page design elements will use the new font. For example:
.h1 site-title {
font-family: "New Font", Arial, sans-serif;
}3. Using a plugin
The easiest way to implement new features in WordPress is to install the appropriate plugin. To use Google Fonts, we recommend installing the Google Fonts for WordPress plugin.
With it, you can choose fonts for pages and posts from the Google Fonts catalog without having to edit the code.
To use any custom font files, not limited to one repository, take a look at the Custom Fonts plugin.
With this plugin, you can upload custom fonts to your site directly from the WordPress admin panel.
Conclusion
Among the thousands of custom fonts, you should choose the one that fits perfectly into the design of the site. To install it, use any of the three methods described in this article.