How to Add Custom Fonts in WordPress Manually and Using a Plugin

Key Takeaways

do you want to add custom fonts to your WordPress website we'll keep watching in this video I'll show you three methods you can use to add custom fonts to WordPress adding fonts is an easy way to customize your site and make it stand out just a little bit from the rest of the crowd and the best way to do that is you want to come up with probably two fonts one for the heading and one for the body if you're not really sure which fonts you want to use then head over to font pair and you can quickly look at what the heading and what the body looks like and you can scroll through and you see the pairings like this so you can pick the pairings that you want and then we can go to the next step for this tutorial I really like the open sans and Ellora fonts so I'll be using that for this video to get those funds head over to the fonts google.com and we need to search for the fonts so Laura was one this is the one I want click on it and I want to select this font and the great thing about the google fonts is if you scroll down you see popular pairings with Laura and you see open sans is one of them that's also the one I want so let's click on the plus button there and now down here you see that we have two families selected to open this up and we want to make sure that we have embed selected we want to make sure that we have standard as the type that we're going to do and I'm going to need to copy this bit of code so I'm going to highlight this right-click and copy and now we need to add this to our website so let's head back over to our WordPress dashboard I'm going to put this in expanded mode so you can see more of my screen and we want to head over to plugins add new to make it super easy to add this bit of code we're going to install insert headers and footers this makes it way easier for you to add code to your site without going into the theme files so the insert headers and footers by wpbeginner this is the one we want so let's click install now and once it's installed let's go ahead and activate it now it's activated we can go down to settings insert headers and footers under the header part I'm going to right click and paste we also need to save now we have access to the font so now all you need to do is go under appearance go to customize go to additional CSS settings and you'll want to add codes like this to bring in the font the next method is by far the easiest and it's by using a plug-in to add google fonts to your website google has created a directory as several web fonts that you can use for free and this is the site that you can look at to see what they look like to pull those fonts into your site we're going to use a plugin so let's head over to our wordpress dashboard we'll go down to plugins add new and in the search box let's look for easy google fonts this is the one we want to add so let's click install now and then once it's installed go ahead and activate it as well now it's activated we need to bring it into our website to do that we'll go to our appearance area customize it's on your theme it's pulling in different areas so I'm going to click on typography here and the default typography and these are the typical for the typical elements that are used for different fonts so I'm going to scroll down so you can see better so these are the different areas that you can add a different font to we do recommend that you stick to one or two fonts typically one font for your header areas and then one font for your paragraph your paragraph is the body text of your articles and the header areas are usually the larger portions that you see at the top this is the title so you can go through here and edit each font so for paragraph which is usually my body text I want to edit this and you'll want to scroll down to find the font family take a little bit of time to look through the google fonts to see which ones you like and then head back over here and then you can pick the font family that you like for my body I usually like Laura so we'll check that and then you see it automatically changed you can also choose the font weight stop and that really shows it off I want to keep it at regular I want to do the same thing for my heading font so again I'm going to go down click on edit font go to theme default and for this one I want to use open sans again you see it change here and we can apply a different weight like that now if you want you can also click on the appearance area and you can change the font size 17 and 18 pixel is a really good size nowadays you also can change the line height and that is the spacing in between your sentences and people like to do a lot of line height these days to get a nice white space around it to make it easier to read so you can play with this as well once you're happy with the settings you can click publish and now your site has specific fonts from google fonts area the next method you can use is by using something called Typekit it's another free and premium resource for great fonts to add to your site just head over to Typekit and you'll want to create an account once you've created an account head over to the fonts areas you can click on the my library so you can see the free and paid ones and just go through and pick the ones that you want alright now that we've gone through and picked the fonts that we want let's head back over to our WordPress dashboard and let's head back over to plugins area add new we need to find the Typekit fonts for wordpress plugin this is the one we want so let's go ahead and click install and once it's installed you'll need to go ahead and activate it great now it's activated you can either go to settings from here or you'll find it also under settings here Typekit fonts and we need to add the type kit kit-- ID so to do that go back over to type kit up here we'll go to recent kits pick the kit that you've just created I want to click on embed code and since it's asking for the type kit ID we're just going to copy this information go back to my site paste in the tech kit code and we'll just do the CSS link which is the simplest now we can click Save Settings and again to bring in those fonts for the site you'll just need to go to the customize area and add the custom CSS to your site to bring that in did you learn something from today's video if so subscribe to our YouTube channel and we'll send more helpful tips to help you manage your WordPress website and thanks for watching