Articles

How To Add Custom Fonts To Beaver Builder Plugin & Theme Or Astra Theme


One of the best ways to make your website
stand out in be branded is by using custom fonts and traditionally using custom fonts
is been kind of a pain in the rear end you want to use with your team in your page builder
it’s just not been easy until today, share with you how to add custom fonts to Beaver
Builder and also the Beaver Builder theme and another theme as well hi my name is Adam
from WPCrafter.com where I make WordPress tutorial videos for non-techies if you know
your consider clicking on the subscribe button if you want to not miss anything go ahead
and click often on the bell and you too will let you know when I have a new video everything
will be linked in the video description box down below let’s jump in new plug-in just
came out it’s called custom fonts only problem with being a plug-in named custom fonts or
to see when were trying to find it actually in WordPress it’s kind of a pain but I’ll
show you how to find it and what this plug-in is can allow you to do first caused by the
makers of ultimate add-ons for Beaver Builder and they also make the Astra Theme but they
added a new update to this plug-in that’s going to allow it to easily be able to add
custom fonts to whether using the Astra Theme or the Beaver Builder theme also to Beaver
Builder the plug-in now if you’re not using Astro or Beaver Builder theme don’t worry
about it because you can still use the plug-in it will just make those fonts only available
to the page builder okay so that is it now if you are using type kit don’t worry you’re
not left out in the dust they also have a type kit version of this same plug in the
skull custom type kit fonts and it’s the same compatibility right there so to save some
time I 40 done the search here in my website for custom fonts and the reason I had to put
the word Astra is because check this out if I just search for custom fonts it’s not going
to pull up because it’s such a kind of you know so many options here and you can scroll
down if you don’t see custom fonts is so one of the safe ways of finding it will the type
get one comes up on one of it’s going to come up on the next page 1 of the fastest ways
would be just a search for the word Astro which is the theme or just go ahead and type
custom fonts Astra I find that kind of funnies let me go ahead and pop and asked her again
okay and here we go so we have the custom type kit fonts and we have custom fonts now
I just wanted to also add that this is going to work with the free version of Beaver Builder
the free version of Astra Theme if you’re using those free products so you’re not left
out some go ahead and click on install enema to go ahead and activate it now what it’s
going to do is it’s gonna add a new option underneath appearance so let me go to that
now appearance and then here it is custom fonts number four do that let me just go ahead
and show you that I’m using the Astra Theme but I’m going to switch to the Beaver Builder
theme in this video so versus go to custom fonts and let’s go ahead and create our first
custom fonts of the first thing is to go ahead and give it a name and then we need to upload
the custom font now you can get custom fonts from lots of different websites are the ones
that have free custom fonts and theirs paid custom fonts that you can add so I have one
already downloaded on my computer now don’t get overwhelmed in this step because what
happens is right after you give it a name there’s all these different locations to upload
files to and then you can think what is the best one for me so ideally the their kind
of presented there there are some differences here K the WOFF2 is the ideal one it’s the
same thing as the WOFF which is the widest compatibility and when I say compatibility
I’m talking about web browser compatibility we have many different web browsers with many
different generations of that individual web browser so the whitest compatibility is can
it be the WOFF format however the WOFF to format is the same but the font files going
to be compressed and smaller a note on the EOT format this is going to give you better
compatibility with Internet Explorer and older versions of Internet Explorer so he only had
VWOFF to be okay for the most part depending on who visit your website but I’m sure there’s
some ideally you would also add the EOT version as well just for maximum coverage so that
the most amount of people will see your custom font being use some to go ahead and load this
up right now with the name okay so that was fast now we just need to go ahead and upload
our font now I actually only have a TDF font because I’m probably not that prepared for
this video but that’s okay you’ll get the point you click on upload now here’s one of
the caveats if I click on select files right here what’s can end up happening is a WordPress’s
it you know I’m looking through the files on my computer WordPress’s not gonna want
me to upload one of these font files are just looking for certain file types so what you’re
gonna have to do is just gonna do a drag-and-drop things so I have my file browser right here
and I’m just dragging and dropping my font in and bam it goes and accepts my font so
now click on select and you can see my custom font is there all I have to do is click on
add new font now and there it is so now it’s going to be available in my being and in the
page builder and let me show you that so first I’ll show you in the page builder and then
I’ll show you in the theme and then Emma switched the theme to Beaver Builder and you’ll see
it there as well okay so let’s see how about this one right here is actually using this
in a video I made yesterday about in-line editing let’s jump into Beaver Builder right
here now I actually haven’t even tested this in Beaver Builder so I’m kind of living on
the edge so I’m clicking this existing headline go ahead and click on style and then it right
here where it says font I will click on that and let me scroll all the way to the the top
and you can see it’s now listed right there underneath the system setting it’s been a
little cut off here so I can just click on it and now it’s changed to my custom font
you saw how easy that was I love that slimming just go ahead and click on Don and click on
publish and that is now a done deal so let’s go ahead and jump into the customizer actually
here I should just go back and then jump into the customizer right on this page in your
to see in the Astra Theme I’m just have the free version of the Astra Theme I already
have it loaded up so I can just click on topography I can click on base topography and then right
here for my headings I could go ahead and scroll all the way to the top and here it
is under custom fonts and there it is it’s going to now make all of the headings that
I use on this website this custom fonts only go ahead and click on publish now and I haven’t
tested this myself now let’s see what happens when I switch my theme to the Beaver Builder
theme my go to appearance the themes and here it is on the click on activates and then I’m
in a go to that same page just a plate say because I know what’s on it let CM to click
on view and now many going to the customizer for the Beaver Builder steam right jump in
and here avenues the Beaver Builder steam in a little bit so I’m assuming let’s see
where are my fonts it’s probably gonna be under general let’s see headings while I’ve
got a good memory so that’s how it’s organized here the Beaver Builder theme we have this
as our fun family but there it is the custom font it’s right there underneath the system
fonts and so now I can easily add these custom fonts using with just putting them in one
location just put them in this custom fonts plug in and it’s can it carry over and be
pushed into as an option into Astro or Beaver Builder and is also going to be pushed into
the free version of Beaver Builder or the paid version of Beaver Builder I mean it’s
perfect right so the same process this is goes in effect if you want to use a custom
type kit font now prior to this there was of course ways of doing this but you had to
have lots of snippets a code stinks could break it was you had added to the page builder
and then added to the team there was no easy way now there is an easy way to do it so if
you don’t have Astra you want to look into it’s just WPCrafter.com/Astra it’s free they
also have a pro at all and that’s only $59 if you don’t have Beaver Builder and want
to check that out it’s WPCrafter.com/Beaver Builder those links actually don’t take into
those websites a ticket back to my website where I have some special trainings I put
together for you if you decided that you wanted to go ahead and get those products I got all
those and all that information on those links now I want to ask you what are some great
resources for custom fonts on the Internet there’s websites for free custom fonts and
paid custom fonts what are your experiences with these websites if you would care to share
down below in the comment section some of these different resources that you have come
across I think that would be awesome and also if you know of any great fun peers that looked
together to really leverage this new feature of custom fonts I would love to hear from
you hey thanks for all your support on this channel thank you for watching and I’ll see
you in the next video

Leave a Reply

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