Bootstrap 4 Using Google Fonts


hi guys and welcome to another bootstrap
4 video this is Jamie from system 22 and web design and tech tips calm in this video we’re gonna explore Google
Fonts and how to add Google Fonts to our bootstrap 4 website this is what we’ve got at the moment is
the default bootstrap font going on here and we perhaps want to make this more
interesting by adding a stylized font for the headers and perhaps another font for the body text or the paragraph text
here so let’s go to Google and just put in
Google Fonts there we go click on the Google Fonts and it’ll bring up the Google Fonts page
and all these are free to use you just want to put them in your site and if you have something in mind great
if you don’t you can just scroll through the lot
you can select serif fonts sans serif fonts display handwriting I’ll just
demonstrate this uncheck all these so now you just got serif fonts serif
means it’s got those little tags underneath and on the side there if you
just want sans-serif fonts no tags clean-looking personally I
actually prefer these but there’s no accounting for taste so
you want to get what you want display fonts there’s something with a bit of a
bit more wow factor to them I mean she’s got some crazy stuff here
handwriting fonts they’re quite fun script fonts
look just like handwriting and there’s this really are some great
ones here some people have taken a lot of time designing these
and monospaced fonts which are real simple fonts like these and you may say well that’s well and
good well how do I put them in my website
it’s pretty easy actually let’s get well let’s have a think what we want to do
first here’s our page let’s do something with our title here
so we want something with a bit of impact
well could use the impact font but not while I’m looking at let’s use one of
these display fonts perhaps alpha slap one that’s pretty interesting
okay wellness uses monotone I’m not gonna use these I’m just gonna show you
how to use them but let’s use this so we can see for effect so I’m going to hit
the plus button to select this font and that little black bar appears down the
bottom there now what we’ve got going on here is we’ve got a link with a
stylesheet for this font and then we’ve actually got the font family for our CSS
which is great so what we need to do is copy this link at the top from that
opening tag to the closing tag make sure you don’t clip off any of those ctrl C
to copy let’s open our brackets text editor and if we go up to the top here’s our
style sheets right here I want to add this one just below our
last one here’s our custom style sheet let’s give it a title which is tag
exclamation two dashes and call it Google Fonts this makes it easier for
anybody that’s following along with us that we’ll have to edit this template
and find this easier if we give it a title and drop down and let’s just paste
in control V what we copied from the Google site there and this is gonna pull
in that style sheet for that font from the Google site let’s say that control s
now that we’re doing that we want to tell our site what we want to do it to
so if we go to our custom CSS here let’s back it up all right
index.html we want to work on that h1 tag which was a heading tag this here this is the one I want to
affect with that new font so we simply go to our custom CSS it’s an h1 tags all
we have to do is write h1 open and close some curly brackets just like with any
other fault then if we go to our Google site we can
type this in but they kindly put it there for us we just have to copy this
ctrl C back to the site control-v to paste and it’s pasted it in
there h1 font family monitor curse it quick save ctrl s back to the site now
when we refresh that should change to that
interesting font style there there we go and like with any other font you can
make it larger or smaller let’s make it slightly larger I don’t know what it is
at the moment just now I use 55 pics and that seemed to work enough that will
make it tore or not larger or not ctrl s to save there we go that’s made it larger but
you get the idea you can pull in any font from Google any way you want and
you don’t have to just stop it using one you can use more than one will do the
same thing let’s find a different type let’s try a handwriting script and this is purely to demonstrate as
kind of nice this is purely to demonstrate
what you can actually do well that tangerines I quite like that
let’s hit the plus on there and it’s added again to this little black bar
down here I’ll get rid of that monotone cuz we’ve
already got that here’s the tan tree and again here’s that link they given us to
the styling sheet for that particular font to make it look like it does ctrl C
to copy back to our brackets we just simply have to plop this underneath the
one we’ve got there so there we go there’s the mono Tom there’s the
tangerine save it ctrl s now we want to tell it what we want it to use this on
so let’s go to our custom CSS this time you go to the site again let’s use it on
this which is our paragraph text see here
paragraph P we could say on the lead just on the lead text because it’s a
class of lis but we’ll call it paragraph so again all we have to do put a space
there P close some curly brackets drop down unless
just copy again copy what they’ve given us from the Google site there you control reader paste there it is
ctrl s to save back to the site now when we refresh this should change
that nice cursive tangerine script that we just got from Google
there it is a little bit small can hardly read that let’s make it a little
bit bigger do exactly what we did with this but I’m going to copy that control
see you
let’s make it 25 well I just pull just make it 18 picks see if that makes it
big enough for us ctrl s to save and refresh made no difference at all let’s inspect
it okay that’s why because it’s that lead
class take that off let’s take it up to just selecting it
with my mouth wheel I’m rolling it up there we go that’s a bit more of a real
readable size that’s 41 pics so let’s just remember that our 40 picks
actually of course when i refresh it’ll go back
down where it was cuz that’s non-destructive editing and let’s put 40
pics here see that and just for a second I’m gonna take that lead class away
because it’s overriding what I want there we could pretty important in there
but I don’t what you want to do that so if I take that away it’s just a regular
P say that control s practice site now when i refresh that should
there we go and of course like
other font you can make it bolder if you want to or lighter if you need to
and change the colors let’s say light blue I guess my blue should make a
difference semicolon control s back to the site
there we go so that’s how easy it is to customize
your bootstrap for site with a bit of google fonts should you get the desire
to make it sort of standout and interesting and there’s a wonderful
fonts out there they really are so do take a look for my purposes I’m gonna
leave it as it is I want mine pretty straight looking so I’m gonna go back in
there just gonna delete all of this ctrl s and I’m gonna put that lead class back
in there and I can do that by just going ctrl Z or controls there to undo as long
as I haven’t closed my brackets out and reopened it ctrl s to save that back to
the site there we go I’ve still got those fonts
pulled in on the index cuz I’ve got the the CSS link in there so I can use them
again if I want to just one other thing we’ve covered this before with regular
fonts but you can also do it with the google fonts if you want everything on
your site all the text on your site to be a particular font whether it be now
web safe fonts or a Google font really easy to do let’s just get that tangerine
again I’ll just copy that again let’s go back to my custom CSS now remember I’ve
already got the style for that tangerine right in my index.html so let’s say we
want this for the whole site instead of saying h1 or P or h2 3/4 blah blah blah
put it in the body tag here you don’t have a body tag just type body open and
close there it is now everything h 1 2 3 4 5 6 p whatever is gonna all be that
tangerine so if i say that ctrl s back to the site fresh everything she changed that
cursive tangerine bootstrap h1 P tags and also our links will down here there
you go and that is not what I want at all but
it’s just demonstration of what you can do if you want to set the styles for
your whole site so let’s go back and just undo that so that is how that is
how to add google fonts to your bootstrap 4 website should you get the
urge take those away because I really don’t
want them I’m keeping my site clean but there’s an option for you should you
desire to do it I hope you found that useful if you have
please like the video and subscribe to their channel if you’re interested in
web design please take one of our courses below we’ve got some huge
discounts for our YouTube subscribers we’ve also they’ve got some great free
courses down there so have a look once again this has been Jamie from system 22
and web design in tech tips comm thanks for watching have a great day

Add a Comment

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