How to Add Custom Fonts to Your WordPress Site (3 Methods)

Typography is more important than most people give it credit for. The fonts you use not only impact your website’s presentation, they can also make it stand out from other sites and render your content easier to read. Picking the same fonts as everyone else might be a safe bet, but it can be worth your while to add custom fonts to WordPress.Although WordPress includes a decent variety of font options out of the box, there are plenty of ways to improve on that selection. If you know how to include custom fonts on your website, you’ll be able to pick from thousands of exciting options. This will enable you to find a font that fits your niche and audience.In this article, we’re going to talk about what custom fonts are and where you can find some excellent choices. Then we’ll go over three methods you can use to upload custom fonts to WordPress. Let’s get to it! content management system (CMS) doesn’t include out of the box. There are thousands of custom font options that you can find online, and in general terms, nothing is stopping you from using any of them.Keep in mind, though – the fonts you choose shouldn’t just be aesthetically pleasing. They should also meet some additional criteria:Each font you include should be easy to read.It needs to fit in with the general style of your website and the other fonts you use.Letters should look good at both large and small sizes, since you need to keep mobile responsiveness in mind.Aside from these technical considerations, fonts provide you with an additional way to express your site’s style. They can become a part of your branding, and over time users might come to associate them with your site and business. So youll want to consider your choices very carefully.Where you can find custom fonts for your WordPress siteIf you do a quick search for ‘free fonts’ using any search engine right now, you’ll find hundreds of pages with broad selec tions to pick from:The problem, however, is that a lot of those free font websites don’t tend to have high standards when it comes to curating their selections. You may be able to find some jewels, but in many cases, they’ll also be full of fonts you wouldn’t be caught dead using even if you were working on a 2005 MySpace profile.Fortunately, there are a lot of excellent font repositories that do go to great lengths to curate their collections. One of our favorites is Google Fonts, which offers over 900 font families in several languages, all of them free:Another excellent option is Adobe Fonts  (formerly Typekit), which provides over 1,700 font families to choose from. Keep in mind, though – to access them you’ll need a Creative Cloud subscription (any tier will do). If you’re an Adobe user, that means you already have access to the entire font collection:These two sources alone will give you plenty of options to choose from. Keep in mind when making your selection that each font you choose should fit in with the rest of your site’s style, and be easy to read. Once youve found a few fonts you like, all thats left is to add them to your website.How to add custom fonts to your WordPress site (three methods)When it comes to custom fonts, WordPress provides you with several ways that you can implement the options you want. Let’s go over what each involves, so you can select the method that works best for you.1. Edit your themes fileIf you don’t want to upload font files to your website manually, you can always ‘import’ them from third-party repositories. With Google Fonts, for example, you can open any font page you want and click on Select This Font  at the top of the screen:Once you do that, a new menu will appear that includes two snippets of code. The first one should look like this:link href="https://fonts.googleapis.com/css?family=Robotodisplay=swap" rel="stylesheet"This code sh ould be placed within the head tags of your child theme’s header.php file. You can find this within your theme’s folder in the public_html/wp-content/themes directory.With that line, you’re telling WordPress to import the option you selected from Google Fonts. To use it, though, you’ll also need to open your child theme’s stylesheet and specify which elements should take advantage of your new font. Here’s what that code should look like:font-family: 'Roboto', sans-serif;Remember, your child theme’s stylesheet should be within the same directory as its header.php file. That means you can take care of both tasks in the same place, and implement new fonts in just a few minutes.2. Upload your fonts file to your themes folderIf you’re all about performance optimization, uploading font files to your website directly can enable you to shave a few milliseconds off your loading times. The first thing you’ll need, of course, is th e font file you want to upload to your server:Since WordPress doesn’t include a dedicated fonts folder, you’ll want to create one using your trusty FTP client. You can add the folder wherever you want, but we recommend placing it within your themes directory so you can keep track of it. Set it up now, and upload your font file to the new folder:Once the file is in place, open up your child theme’s stylesheet. Now you’ll need to call on that font so you can use it, via a snippet that should look like this:@font-face { font-family: New Font; src: url(http://www.yourwebsite.com/wp-content/themes//fonts/your-new-font.ttf); font-weight: normal; }Please note the font family name and URL above are placeholders, which you’ll need to replace with the right information.Once youve entered this code, don’t close your theme’s stylesheet just yet. You still need to configure which elements will use the new font, with some code thats very similar to what we looked at in the last section:.h1 site-title { font-family: "New Font", Arial, sans-serif; }In this example, we’re configuring our H1 subheadings to use the new font. However you can replace that with any other element you want, or multiple elements if youd like to use the font in more than one place.3. Use a pluginAs is often the case, the easiest way to implement new functionality in WordPress is to install a plugin. When it comes to using custom fonts, there are a lot of options to pick from.For example, if you want to use Google Fonts, we recommend the aptly-named Google Fonts for WordPress plugin. After activating this tool, you’ll be able to pick from the entire Google Fonts catalog for your pages and posts, without the need to add any code to your website: Google Fonts Typography Author(s): Custom Fonts Author(s): Brainstorm ForceCurrent Version: 1.2.0Last Updated: October 3, 2019custom-fonts.1.2.0.zip 94%Ratings 232,599Downloads WP 4.4+Requires With this plugin, you get to upload fonts to your website right from the dashboard, and use the Customizer to pick where and when to use them. Either of these plugins makes it a breeze to add new custom fonts to your site.ConclusionIf you pay attention to the fonts that websites use, you’ll notice that many of them stick to the same few tried-and-true choices. Some fonts are pretty safe bet when it comes to readability and user accessibility. However, with thousands of options to choose from – both free and paid – its worth looking for one that also fits your website’s style and audience perfectly.As for how to upload custom fonts to WordPress, you can go about it using three different approaches:Edit your theme’s file.Upload the font’s file to your themes folder.Use a WordPress custom fonts plugin. Want to add custom fonts to #WordPress? Here are 3 easy ways to do it 🅠°Ã¯ ¸  #tutorial Click To Tweet Do you have any questions about what types of fonts you should use on your website? Let’s talk about them in the comments section below!Free guide5 Essential Tips to Speed Up Your WordPress SiteReduce your loading time by even 50-80% just by following simple tips.