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
Không có nhận xét nào:
Đăng nhận xét