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
Join The Conversation
By using the plugin as you mentioned, I’m still having issues every time the page loads or scrolls, it switches between the default font, and then loads the custom font… Anyway around this? I’d like it to load only the custom font first and not show that I’m trying to “mask” something..
Seems to me that this would be some conflict with your theme or another plugin you are using on your website. Here is the best way to fix WordPress errors.
hello
in beaver theme we can add font to Theme Customizer & Page Builder modules by function.php as explaned here:
https://kb.wpbeaverbuilder.com/article/234-add-web-fonts-to-your-theme-and-the-beaver-builder-plugin
add_filter( ‘fl_theme_system_fonts’, ‘my_bb_custom_fonts’ );
add_filter( ‘fl_builder_font_families_system’, ‘my_bb_custom_fonts’ );
is there a why to add fonts to astra free theme customizer (font family) without plugin
Why do it without a plugin when it’s insanely easy to do it with this plugin and have them work with the Astra theme & your page builder?