Are you bored with the fonts on your WordPress site? Maybe the current one doesn’t work well with your site’s redesign. In this article, I am going to show you how you can easily add fonts to WordPress.
While choosing the font is entirely up to you, and makes for an important decision, in this article we’ll cover the nitty-gritty technical of adding them. Specifically how to add web-friendly fonts.
Where Can You Get the Fonts?
There are a lot of websites that provide fonts for you to download and you can get them for free or at a premium price, usually depending on the design difficulty level.
Let’s take a look at some of the best font websites on the internet right now:
- Google Web Font Service — the official Google subsidiary that has 916 free fonts in its collection. You can filter them out based on font categories, thickness, and even popularity.
- Edge Web Fonts — this website is a part of Adobe Edge Tools and most of the fonts are made using its Typekit application. There are 500+ options and users can download them for free without having to make an account at all.
- Font Squirrel — One of the most popular websites to download fonts which also has a web font generator built in. Unlike the previous entries, users have the option to download free and premium fonts. What’s more, users can join its forum to discuss any topics about the typography world.
- 1001 Free Fonts — It has the most extensive collections of fonts in this list. You can preview the desired item using your own text and its alphabetically organized fonts will make it easier for you to choose one from the thousands of alternatives.
Web-friendly Font Formats
You have to make sure that your font is readable by all internet browsers, otherwise, your website will possibly just display an empty page or a font that does not match your design.
Make sure to check if your preferred option is from one of the compatible web font formats, such as OTF (OpenType Format), TTF (TrueType Font), WOFF (Web Open Font Format) and WOFF 2.0.
Those are the most widely used types of fonts, not only on the internet but also on PCs.
So if your web font format is not common, you need to convert it first. Many websites can help you with that, but we’ll be specifically using Web Font Generator from Font Squirrel.
Here’s how to do it:
- Go to the site. Then, click on the Upload Fonts button.
- Locate the downloaded font file on your computer and press OK.
- Once the process is done, get the converted version by clicking Download Your Kit.
- Unzip the archive and now you can upload them to your webpage.
Let’s say you have prepared everything to add fonts to your WordPress site. It’s time for me to show you how the process is done.
Adding Fonts to WordPress
There are three methods to add fonts to WordPress — two manual ways or using a plugin.
Modifying WordPress Template File
By using this method, you need to copy the code provided by your font providers and paste it in your header.php template file. You can find it in your WordPress Dashboard by going to Appearance –> Editor. It will look similar to this:
In order to get the required code, you have to visit the website where you download the font. In my case, I am using a Google web font so the snippets will be as follows:
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
Be sure to put it between <head> and </head> in the header.php file. Here’s an example:
<head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <link rel="profile" href="https://gmpg.org/xfn/11"> <?php wp_head(); ?> <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> </head>
If you are using a child theme, the first thing you need to do is move the header.php file into the child theme folder. Only then you can edit the file.
An important thing to note is that this method will apply the font to your entire website.
Using @front-face Function
Unlike the previous method, using the @front-face function will allow you to apply the font only to certain web elements of your choice. In order to perform such a task, you will need to connect to your site using an FTP client like FileZilla.
After you install the program on your computer, open it, click File and choose Site Manager. Prepare your FTP account details which you can get from your hosting provider, including FTP host, username, password, and port.
Fill in the required column and choose Use explicit FTP over TLS if available for encryption. Then, click Connect.
Now, you can start using the FTP to edit your font file:
Download the font and extract the archive. Remember, if it’s an unsupported one, you can convert them with the site that I have provided previously.
Upload the content to wp-content/themes/your-theme/fonts/. Make sure you change your-theme folder to the one you actually have. In my case, it’s in /twentyseventeen/fonts.
Now in your WP Dashboard, go to Appearance –> Editor. On your stylesheet (style.css), copy the following code. After that, click the Update File button.
@font-face {
font-family: your font name;
src: url(http://hostinger-tutorials.com/wp-content/themes/twentyseventeen/fonts/your-font-name.ttf);
font-weight: normal;
}
Ensure that you change the directory above to your real website and the font that you want to use.
Go back to your CSS sheet to change the font in the specified part of your website. I take the site’s title for example. Here’s the code:
.site-title {
font-family: "Your font name", Arial, sans-serif;
}
Using a Plugin
There are many WordPress font plugins on the market but the one that stands out the most, called Easy Google Fonts. It is free to install and most importantly, has everything that you need to easily add fonts to WordPress.
Among other excellent features, this plugin allows you to choose from 600+ Google fonts and makes sure it is compatible with any themes without any coding. What’s more, the live preview can make it easier to see what the font will look like on your site.
The process is also is fairly easy:
After you set up the plugin, there will be a new setting named Typography in Appearance –> Customise. Choose Default Typography and you’ll see controls that will allow you to change the heading and paragraph font on your site.
Under each component, you can configure the typography to your liking. From the font family, size, color, and even position, everything is customizable. Once you’re done, click the Publish button.
It is much more convenient than the manual methods, isn’t it?
Conclusion
If you feel like your website needs a redesign and what to change its font to a more suitable option, you’re in the right place. In this article, I showed you how to download and update a new font to your site using three methods:
- Modifying WordPress template file — this method will be useful for changing the font of your entire website.
- Using @front-face Function — it allows you to change the font only for a specific part of your webpage.
- Using a Plugin — a much easier method to change the font on any page component, compared to the manual method.
I hope this article can help you achieve a more beautiful website with your brand new font style!
Leave a Reply