How To Add Custom Fonts To Astra WordPress Theme

In this video show you how to unlock the power
and uniqueness of using custom fonts on your

website now this is going to be for people
using the Astra Theme however hopefully in

the future other theme developers will use
the same method to make it super easy to add

custom fonts to their WordPress themes hi
my name is Adam from WPCrafter.com were I

make WordPress videos for non-techies if you
enjoy the content in this video consider clicking

on that subscribe button and if you like video
notifications is a little bell up to the writer

that click on that YouTube let you know when
I have a new video were talking about the

Astra Theme which is also the theme that I’m
using on my website now I’m going through

a revamping of a lot of different things on
my website part of that is adding custom fonts

to my website to make it look a little more
unique and fonts is something that most the

websites we kind of limit ourselves to just
the available Google fonts but there are so

much better web font are fonts out there not
web Pontius fonts out there and especially

if you come from a print background where
you’re used to using different fonts and different

print materials you might find just Google
fonts are a little on the limiting side and

there’s a lot of times we might want to use
custom fonts on your website this is especially

helpful if maybe you have a restaurant website
or some website involving kids or gaming or

something along those lines maybe not just
your standard business website but something

we need to add a little bit of uniqueness
to it and that’s were custom fonts come in

now if you’re using the Astra Theme they released
a new plug-in recently called custom fonts

and you can actually install this directly
in where own WordPress all you have to do

is go to plug-ins add new and do a quick search
for custom fonts and it’s gonna pop up right

away or you could just do a search for Astra
but see actually I and I’ve never searched

it this way by searching for custom font looks
like a million other things come up but if

you would just go ahead and instead enter
Astra and when you hit Astra you see all of

the different plug-ins that are available
for asteroid you can see right here it’s brand-new

it’s called custom fonts and it makes it insanely
simple to add custom fonts to your WordPress

website to show you how to do it right now
so if you’ve downloaded and installed and

activated this plug-in and you go to appearance
you can see a new option called custom fonts

now let me preface this for a second and say
adding custom fonts to your website if you

know how to code add custom functions and
queuing scripts and all that kind of stuff

yes sorry if I lost you you could do this
already you know you just put your custom

coded but if you’re like the other 99.999%
of us this plug-in will definitely help you

especially if you’re using the Astra Theme
it is so easy all you have to do is give the

font and name and then you can upload it and
there’s these different formats that fonts

usually come in now what you’re going to want
is a font in this PTF format and output this

link in the video description box that explains
the difference between these various formats

it basically the main difference is compatibility
with different web browsers and in the font

format you want is the PTF format it’s going
to be the most compatible with the most web

browsers but I’ll leave a link to this if
you can only get a fountain OTF or W0 FF format

that’s gonna be okay you’ll just realize the
limitations but Juergen wanted NTT F format

now you can go to Google and search for free
fonts I did this search right here as well

free fonts and a whole bunch of websites come
up one of them is the font it’s the one that

I downloaded font from earlier now I’m not
positive on how the licensing works on all

of the seas are free fonts some of them they
say just freeze some of them say hey once

you shoot me a donation disease are all custom
fonts made by people but any place or you

could purchase a font you can use that file
you just want to get it in PDF format so let’s

see I could see may be this for a that’s actually
really cool font right here let’s see if it’s

in PDF format script handwritten go ahead
and download it and just see what happens

this high tide font I think that looks pretty
pretty cool some go ahead and click on download

it is downloading to my computer now let me
open up a downloads is a zip files let me

go ahead and open this zip file okay I just
unzipped it it’s on my desktop and it looks

like it’s a PTF formats and so I’m in to go
ahead and installed see what happens someone

to go ahead and click back to custom fonts
I’ll give this that name the high tide you

can honestly name it whatever you want okay
and then I have my file here a minute drag

and drop it right here it says PTF actually
I think I have to go ahead and click on upload

and select it okay now that I’ve done that,
go ahead and click add new font and now I

have it listed right here so I got my high
tide font and this is one that I added earlier,

wowsers so now let me show you how easy it
is to now go ahead and use this custom font

so what you want to do is depending on the
page builder you’re using I have Elementor

installed on this site and in Elementor there’s
a specific setting that says in Elementor

use the fonts that I sent with the theme in
your gonna want to go ahead and do that so

it says right here disable global fonts you
want to go ahead and check this box click

on save changes so now to go into appearance
and customize I want to jump into the customizer

and so you could see when it pulls up here
okay so here is that custom font by through

and called wowsers Bauman to change this right
now to that high tide one and just see what

it looks like so I have this topography option
I’m in a click there and then I’m been a choose

a base topography and then right here for
headings I had it set to that wowsers but

when you click on it you now have this custom
section and here is that other custom font

I uploaded I don’t know it’s going to happen
I’m in a choose it and let’s see if that changes

and there it is now obviously it’s a little
on the small side that’s why you want to play

around with these things and test them out
but you can see I’ve installed a new custom

font and it was that easy now let me go ahead
and save this and let me go back into the

backend of WordPress now where you’re really
getting unlocked the power of these custom

fonts is if you have the Astra Pro package
it has a expanded list of options for fonts

that you can choose for various areas like
menus and things of that nature some to go

ahead and activate that now entry what that
looks like him to go to plug-ins a minute

click on activate for aster per Astra Pro
now that brings a bunch of modules that I

can enable it in extensions that I can able
enable just the ones I want and I access them

by going to appearance Astra and then I click
on add-ons and here they all are so I’m just

canoe enable the topography one right here
and now that that’s activated him to go ahead

into the customizer and now when I select
on topography right here working to see more

options of of different settings where I can
choose the font for specific areas on the

website so before we didn’t have this primary
menu option but I can choose it and now I

can change the font for the menu area so I
can click on the font family here and I can

choose wiles or’s if I wanted to and it’s
gonna change it to that wowsers font I had

uploaded when I tested it out you see how
this brings a custom look to the website just

by doing something as simple as putting in
a custom font I can see what high tide looks

like it’s going to scrunched down I think
I would have to really increase the size of

it to be able to see it better just like that
so let’s see I can play around with it to

see if it I can make it look the way that
I wanted to look but you get to the point

here you how easy it is to add these custom
fonts to the various locations on your website

let’s take a look at some of the other options
that we get with Astra Pro for the fonts so

I click on base topography now I still get
my headings and the body content area but

if I click on content now I can choose a unique
font for each of the different headings and

so H1 and H2 all the way down to age 6 so
a good strategy here is Sais the H5 nature

six you can put different fonts that you might
want to use more sparingly you know perfect

example you might see this a lot of times
where you have your main font and a your main

heading and then maybe above or below you
have some cursive font or something like that

to make it just stand out a little bit and
have a bit more of design into it you can

assign H5 and 862 different fonts that you
might want to use it sparingly and then when

you’re building out your content in your page
builder you can for the areas that you want

to use these particular fonts you could just
change the H style for those different things

right there so that is that and let me actually
just demonstrate that just to show you so

I wanted to use the high tide and I’ll make
this an H6 right here probably didn’t want

to make that much larger like this so now
I’m assigning high tide to a heading six and

let’s a heading five I’m been assigned as
wowsers and I might want that to be say 25

pixels I’ll go ahead and do a save and publish
a get outta here and then let me go into pages

and for the homepage I’m in a go ahead and
click on edit with Elementor same would be

if you’re using Beaver Builder or any other
page builder where you get to choose when

you click on a bit of text if it’s good to
be one of these headings so I have this heading

right here when I click on it I can choose
a style and then right here it’s it’s statically

sent to Montserrat but instead I can go here
to default and then I will go back here to

content in here I can choose it from H1 to
one of those different other options so if

I wanted to change the font I can easily do
it right here by changing this HTML tags I

know for the H5 tag I use that wowsers a font
to so if I click on that then I get the wowsers

font and I can go and I can also change the
size it right here if I wanted to in my page

builder so anyways this is how easy it is
to add some custom of fonts to your WordPress

theme if you’re using Astra now if you are
not using Astro that’s okay you can ask your

theme developer to make this plug-in work
with their theme but I really love the direction

that Astra is going in making these things
that will really enable you to make a unique

website that visually looks stunning to make
it super easy as to simply as uploading a

new font file and fonts unfortunately are
one of those areas that a lot of web designers

may neglect but if you would just get used
to customizing things in using custom fonts

in custom colors things that are just not
with a base insulation Savior using a template

your to be up to make websites that truly
stand out and that with such a wide selection

of fonts especially if you’re making a restaurant
website or all these different websites where

you would really highly benefit by using custom
fonts I really love how the Astra Theme is

making it so easy to do that so I know for
me I’m a go ahead and I’m to start using some

custom fonts on my website if you have any
suggestions of fonts that you love I’d love

to hear about those and maybe if you have
some suggestions for me of some fonts that

may look great on my website go ahead and
if you could leave it in the comment section

down below maybe some of your favorite font
pairings in the comment section that down

below hey thank you for watching this video
and I see you in the next one