April 1, 2020
Bootstrap 4 Using Web Safe Fonts

Bootstrap 4 Using Web Safe Fonts


hi guys and welcome to another bootstrap
4 video this is Jamie from system 22 and web designer tech tips comm well in this
video we’re gonna explore adding fonts different fonts to your bootstrap
website I’ve got a little basic site up here that I’m going to be able to count
down with in this video we’re gonna be using a
free text editor called bracket so you can download it from a link below this
video so here’s what we’ve got at the moment at the moment you can’t see the
writing very well so let’s get that sorted out let’s open our index.html
page which is this page with our brackets text editor here’s our index
dot HTML and if we scroll down here’s on that bar with our links ours is actually
at the bottom here here’s our container with that text that you just saw in it
all I’m gonna do is give it the class of text light which is a default bootstrap
class or say that ctrl s back to this site now when i refresh that text should
become light there we go that’s a lot easier to see
okay at the moment is just using the default bootstrap for text which I got a
feeling is Helvetica on this but it they’ve become very clever let’s just
select it you yeah if you look down here it’s using an
apple system on Apple devices and probably Safari we are probably using
Helvetica here arial sans-serif or fallback fonts so it’s pretty clear it’s
good the default fonts gonna load as to whatever the default is for the rather
you’re using for a various style okay say we want will have a different font
for our h1 tag there well if we look up here here’s our h1 tag bootstrap to
start a template and let’s perhaps give it a bolder font now to play safe
there’s many fonts out there to play safe you might want to go with some web
fonts web safe fonts just Google website safer fonts and it’s gonna give us a
group here of fonts that you can use and the reason that they’ve got more than
one name in them is that’s used to fall back and four back means if a particular
browser or an operating system doesn’t have that font it’ll fall back to the
next one so Times New Roman will fall back two times and then serif that’s
difference between serif fonts and sans serif fonts briefly is this is a
satisfying suits got those little tags on the T and on the bottom and on most
of the letters it’s called those little sort of hang off bits that’s a serif
font and sound the serif kind of means without serif they don’t it’s just
straight writing like this so say we want our heading to have one of these
fonts I mean that’s gonna make it a lot different right there so I’m gonna copy
this impact fullback is charcoal and sound serif control-c to copy now let’s open our
style sheet that we created let’s go down remember we’re working
with this h1 tag here so all we have to do say h1 open and close from curly
brackets and in between we want to write font family font – family : and then put
in what we’ve just coffee which is that impact okay save that control s now if
we go back to our site and refresh and we should see our heading change that
font so let’s go back to our site here we go
now when i refresh this should change to the new font there we go
is that impact font and of course you can do the same for any others this is
paragraph text here so let’s try that and we can change that to a different
font as well it’s perhaps use something completely different with that now
they’ve got something cursive like Georgia sure they have there’s Georgia right there okay so I’m
gonna copy that back to our CSS stylesheet and this time
we’re working with our paragraph text our P text so I’m going to do exactly
the same thing drop down one P open curl open and close some curly brackets and
again font family to prompt do this there so I’ll use that and just paste
that in there and put our semicolon afterwards in case we want to change add
some more code ctrl s to save back to the site now when i refresh this should change
from our default font here to that Georgia which is a serif so you should
see the difference there we go easy and you can add several different
fonts to your site that way fact we’ve got three going on there right now we’ve
got the impact on the top there we’ve got the Georgia there and down here we
still got our default on our links right there so that’s one way of doing it okay
another way of course would be if you want your whole site to have a different
font than the default let’s just go back and take that away we’ll delete that
back to our site and refresh and it should go back to the default there we
go we’re back to the default so you want everything that you gonna be using in
this site to be one font your h1 two three four five six tags your paragraph
tags display tags everything links then simply let’s select a different one
again we want one that we can see to try Comic Sans just copy that let’s go back to our style sheet this
time if we want all to do it I’m gonna put it in the body tag if you haven’t
got one just write body open and close and curlies drop down I’m gonna say font
family again it’s prompted us with the brackets here well I’m going to paste in
what I just copied there put a semicolon in save it ctrl s back to the site now
when i refresh everything on here this the H tags the P tags and our links
should all change that Comic Sans there we go and as you can see they’ve all
changed so that’s if you want to do the whole site if you want to get it all
done in one swoop and of course I’m just gonna back step a little bit and show
you something that I showed you just now is you can customize each font what size
wise and the actual boldness of it so if I hit control Z or controls it however
you like to say it let’s go back to where we were so long as you haven’t
closed the black brackets out you can backstep as as far as you want to go so
there we go and see that that that’s with our impact and our job giorgia here
so if I quickly save that back to the site refresh it should go back to how it
was just now with impact and the Georgia and of course we can style our headings
to be any size we want don’t think we can do much more with this I was gonna
tell you you can make it bold or light or what I have you cuz I think that’s
bold type by default some fonts allow you to go from a hundred to seven
hundred to make them heavier or fatter if you will and some down some support
there so let’s say font size let’s bring it up a bit
let’s try and spell that right is if you don’t spell things right through CSS
they will not work font size let’s say 55 pics oh that’s
not too big for the screen now I’m sure it would be fine let’s say that control
s there we go it’s made that a bit larger not only will it do that to this
one but any h1 tags that you use after this they’ll do that as well and of
course you can change the color as well if you want to it’s just gonna look
particularly nasty I’m just putting read in as example I’m sure we’ll get rid of
this in a minute back to the site there you go now you’ve got a red title that
looks kind of scary okay so I don’t want that and with anything else you can keep
styling it you can put drop shadow on just gonna try something I don’t think
it’ll work with this particular font but may work with this one let’s say font
weight and 100 I don’t think this will work with this particular font but we’ll
try it anyway and see what happens now that didn’t do anything that’s the
default size for this let’s try this with the Giorgio’s let’s just cut this
control x2 cut just gonna go here I’m gonna add I’m
just gonna copy this line I’m gonna drop it down I’m gonna paste it below but I’m
gonna take away this class on this second line so it’s just a default P
class right there let’s just save that just to see what I’ve done there let’s
go here and refresh there it is underneath so we’re working with this
because this has got the class of lead and I want to demonstrate font-weight
and it’s got its own weight so that won’t affect it when we do the P class
whereas this will so let’s go back to our CSS now what I’m gonna do is I’m
gonna get rid of that font family so it’s the default font there I’m gonna
put in font weight and start off with a hundred now a hundred is the lightest or
skinniest and it goes up to seven or eight hundred and the highest ones are
what you call bold or extra bold so let’s save that ctrl s and back to the
site now this is gonna change back to the default font both of these lines
here that’s pretty skinny looking so if I inspect this with the brows I’m gonna
leave that one alone and here’s our P tag is a font weight let’s drag this
down so you see it a little better here’s our font weight of a hundred see
what this supports say two hundred nope let’s try five hundred okay and when we get to 500 you can see
it’s made it bolder just try 700 it’s made it bolder still I don’t think it’ll
go any bolder than that no but if I take that back to 100 back to its skinny self
another way to do this is simply to write bold B or LD
will make it slightly bigger bold will make it bold as you can see that’s made
that bold as well so that’s just a brief explanation of how to customize your
fonts on your site here should you want to now I’m gonna take that all away cuz
don’t really need it for what I’ve got in mind so we’re just gonna take that
all away save back to the site get rid of the chrome inspector there this is
Google Chrome and refresh it should go back to as it was there we go and let’s
get rid of that bit of text below there also to return to how we were simply hit
the delete button there we are ctrl s to save so there you have it that is how to
stylize your fonts or on your site using web safe fonts in the next video we’ll
explore google fonts importing google fonts I hope you found that useful if
you have please like and subscribe to our channel if you’re interested in web
design take one of our web design courses below we’ve got some huge
discounts for our YouTube subscribers we’ve also got some great free courses
down there so check it out once again this has been jamie from system 22 and
web design and tech tips comm thanks for watching have a great day

Leave a Reply

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