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


Do you want to add custom fonts to your
WordPress website? Well 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
Lora fonts so I’ll be using that for this video. To get those fonts head over
to the fonts.google.com and we need to search for the fonts so Lora 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 Lora 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 So 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 fonts 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 code like this
to bring in the font. The next method is by far the easiest and it’s by using a
plugin 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 in to 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 that it’s activated we need to bring it into
our website. To do that we’ll go to our Appearance area Customize. Based 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 Lora 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 that 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 Typekit kit ID so to do that go back over to Typekit, 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 Typekit 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

24 Replies to “How to Add Custom Fonts in WordPress Manually and Using a Plugin”

  1. Thanks, it worked like a charm:) I have a question though.If i installed google fonts plug in do I still need to install header and footer plug in and add css code?

  2. I could not get "Easy Google Fonts" to work with WordPress Theme 2016 for Post_Titles, but with WordPress Theme 2017 it works on Post_Titles. Thanks for great video.

  3. Hi
    Finished using the tutorial and was able to successfully change the body font family(paragraph) however the header remained the same even though I changed the type in all the group (To the same family btw). What could I have done wrong? Please help

  4. "Add code like this." You pulled a fast one! You didn't mention what the CSS is that you write, so you have to quickly pause the video and see it. You didn't even put that CSS in the description of the video so that it can be copied and pasted. 2:27

  5. Hello there, what is your preferred WordPress page builder ? I work with a few although my favourite is undoubtedly Oxygen.
    Many thanks for your effort in this video footage – very good stuff!!
    😀😀😀😀

  6. Okay I followed this however you don't explain if that CSS code has errors. I placed it and it gave 8 errors in the code, so I didn't paste it because it could break the site. That's what it said.

  7. That 2nd methods worked good for me. I want to change theme font in the menu of storytime, how can I do that?

Leave a Reply

Your email address will not be published. Required fields are marked *