CSS Tutorial for Beginners - 08 - Font Family Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

welcome to the eighth tutorial on
beginning CSS today we're going to look
at the font family rule in depth now
we've used it before in our other
tutorials but we're going to expand upon
it a little bit more in this tutorial
now we're going to use the same code
that we used in the last few videos so
what I want you to do first of all is
delete the font family rule that we made
in the last video so let's go ahead and
get rid of these two rules and we'll
just go ahead and save our code now the
font family property allows us to
control what fonts get displayed in the
browser and we can actually put several
fonts in the rule and so basically that
will ensure that at least one of your
fonts gets displayed and not the default
browser font and of course fonts are
very important especially if you want to
match a particular font to the theme of
your website and what we're going to do
now is create a new property up here in
the body rule and we're going to go
ahead and use again the font family
property and the first pot that we're
going to specify is verdana now verdana
is a font that's used in a lot of
websites and it's especially browsers
that are on PCs so I want to go ahead
and specify that first and we'll talk
about that in a minute in terms of how
the ordering works so we're going to
specify Perdana first and then we're
going to specify Arial which is another
very common web font next we're going to
specify Geneva and finally we will
specify Arial black and let's actually
expand this out a little bit more here
okay so we have four fonts and let's go
ahead and and let's go ahead and close
out this property with a semicolon as we
always do now what's going to happen is
the browser is going to try to load
verdana first if it can't find it it
will then try to load Arial and if it
can't find Arial it will try to load
Geneva and if you can find Geneva then
it will finally try to load Arial black
and if it doesn't find Arial black the
browser will load its own default font
but the chances of that are pretty slim
with these types of fonts that we've
specified here so again you want to use
common fonts you don't want to use a
really obscure font because there's a
good chance that the computer
will not have that installed and
therefore the browser won't be able to
use it but again if you wanted to use an
obscure font you can place that in your
property but make sure you also have
some generic funds now verdana is
usually a font that is associated with
pcs Arial is common to PCs and Mac's
Geneva is usually associated with Mac's
and Arial black is associated with both
Macs and PCs so I'm using very generic
fonts here now let's go ahead and save
this now keep in mind we are putting
this in the body rule so the selector
we're using is against the body that
means in terms of hierarchy these fonts
will be applied to all the child
elements that are under body so let's go
ahead and close the browser out and we
will reload this and there you can see
we've got our nice Verdana font that
actually looks a lot better I think that
Helvetica now again if it didn't find
verdana these would be Arial fonts but
the browser did find for Donna
so Arial was not loaded okay that is
going to do it for this tutorial I will
see you guys in the next CSS tutorial