Now, one of the most important decisions that you will have to make when you're designing your website
is what are the fonts that you're going to choose?
And a lot of web designers will start off by figuring out a color palette as well as a font scheme.
So in this lesson, we're going to learn about how we can change the fonts for all of our text in our
website.
Now there are two major font families, and that is the serif and the sans serif fonts.
So you can tell serif and sans serif fonts apart from each other by looking for these little feet at
the edges of all of the letters, and these little feet are called serifs.
Now we can broadly define whether if we want a sans-serif or a serif typeface for any text on our website.
So let's go ahead and do that. If we go into our stylesheet and we change the font family
property for our body, then we actually affect all the text on our web page. And you can see that there's
five major families listed here
now only three of which are you actually going to use.
So we've seen serif and sans serif.
Now, monospace is when each of the characters inside the text take up the same amount of width.
And that's usually a typeface that we use for coding because it makes everything super easy to read.
For example, if this word align was styled in a serif or sans serif typeface, then the 'i' would
be squished right next to the 'L' and the 'g'.
But because all code is represented in a monospaced font, then you can more easily read each of the
letters. So you'll use these to your normal website styling.
And when you do have code on your web page, sometimes people like to style it using monospace.
Now, cursive and fantasy are two families that you're never really going to use.
Firstly, because they have low readability, and secondly, because they generally don't look that
great when used in the body of a website.
So cursive is meant to be handwritten
style of fonts and fantasy is meant to remind you of Avatar, basically.
So let's take a look at what each of these families look like.
So let's first define a font family of serif, and let's head back over to our website and we hit refresh.
You'll notice that nothing happens. By default
we already have a serif family.
You can see that at the end of the Is, we've already got these little feet.
Now, if we change that to sans-serif, however, we will get a noticeable change.
And those little feet or those little serifs now disappear, and we have a different style. Now
for most browsers, the default serif is the Times font, and the default sans serif is Arial.
And this is the Arial font.
Now, if we changed this to fantasy, then it will still work,
it just now looks like I'm producing the next avatar.
So let's head back to a sans serif typeface.
And I'm not really satisfied with just an Arial font.
What if I want a different sans serif font?
Let's say that instead of Arial, I would rather have Verdana as the font for my website.
Now what I can do is instead of specifying just the sans serif broad stroke family, I can add a specific
font or typeface in front.
For example, if I wanted the Verdana font, then I can simply type verdana and then have a comma and
then separate that from the sans serif family.
And now, if we head back over here and refresh, you can see I'm now using the Verdana font.
And what this line of code does is that it sets the font family for all the text inside the body,
but it first asks the browser to try and render all the text in the Verdana font.
Now, if for some reason the browser or the operating system that the user's using doesn't have this
font installed, then it will default to whatever is the sans serif font that is installed on their
system.
Now that's a little bit scary, because that kind of means that I might think that I've designed my
website to look like this, and I think it looks perfect just like this.
But on somebody else's system or browser, they might be getting a completely different style with different
font heights and just a different look and feel.
So there is such a thing called web safe fonts.
Now what this means is that there's a set of font families where most operating systems will be able
to render it correctly.
And for the serifs that includes Georgia, Times New Roman; for the sans serif that includes Arial, Comic
Sans, Impact, etc. Although these are called web safe fonts, and it's basically saying that if you
choose these sets of fonts, then you have the maximum chance of getting it rendered correctly as you're
seeing yourself when you're designing it.
But actually, no font is 100% web safe. And if you head over to cssfontstack.com, then somebody
has actually painstakingly listed all of the fonts that are in common usage
and what is the percentage of users who have installed, separated by their operating system.
So as you can see, the font that most people have is Arial.
So 99.8% installation on Windows, 98.7% on the Mac.
Now that is really, really high.
But for some other fonts, you'll see a difference between the Mac and the Windows operating systems,
and we're not even including Linux users here.
So, for example, if you look at something like Helvetica, which is a Apple-specific thing, then
on Windows installation rate is really, really low.
And on Mac, it's 100% because it comes pre-installed with all Mac OS.
So what can you do if you want to use a font, but you're not sure if everyone has it installed, right?
For example, if I want to use Helvetica, then there's only 7% of users on Windows who are
going to see it rendered in that font.
Well, then you would need fallbacks.
So if we click on this little icon here on fontstack, then we actually copy a set of fallbacks for
this Helvetica font.
And if I go ahead and paste that and replace our font family, then you can see that we have a stack
of fallbacks.
So I'm basically saying that I want the font family to be Helvetica Neue if they have it. And if they
have an Apple system, that's very likely that they will have this font installed.
If they don't have it, then default to the next best thing, which is Helvetica,
and if they don't have that, then default to Arial.
And finally, just go with whatever sans serif they've got installed
if they don't even have Arial, which is very unlikely, but you can see how we're going from specific
to
less specific and all the while ensuring that we're getting roughly a similar sort of typeface and similar
sort of feel, no matter which font the user have installed or not installed.
So if we hit save and we go back to our website, then you can see that on the Mac,
I do indeed have Helvetica Neue installed
and that's what's currently being rendered on screen.
But say, if I was on Windows, then I might be seeing Arial in this case.
And you can go ahead and give it a go and have a look at these font stacks and copy them over to your
web page and see what you're able to get.
Now, what if we were even more picky as designers?
What if I really want everybody who looks at my website to see exactly the same thing as I designed
it?
I want them to see the design that I intended instead of whatever font it is that they happen to have
installed.
And for example, if I was using Helvetica, then pretty much like 93% of Windows users are just
going to see Arial.
What if I really hate Arial?
What can I do to ensure that everybody has the same viewing experience with regards to the fonts on
my website?
Well, you could use something called a font embedding.
So if we head over to fonts.google.com, then you can see that they've got a whole bunch of font
families that you can choose from.
And these are all fonts that are free for commercial use that you can simply embed into your website
and there's a large choice of font families that you can pick through.
So you can choose whether if you want just serif fonts to look through or sans serif.
They have these cool articles about which fonts go well with which and a whole bunch of really, really
useful stuff, actually.
But in my case, I already know what it is that I want.
I want the font called Merriweather.
Now, before we search for that font here, we're going to make sure that if you did apply a filter
like here that I have looking only for the sans serif in the fonts, then you make sure that you just
click reset so that we can find all types of fonts and then we can search for Merriweather.
And we actually want this one, not the sans serif type.
That's.
So let's go ahead and click on it, and then you can take a look at what it looks like. It's got who
designed it, what the purpose of this typeface is,
and you can also see how your sentence would look like if you decided to change the text.
Now, while we here, we're going to go and find the regular 400 point size font, and then we're going
to go ahead and click Plus to select the style and add it to our list of selections.
Now I'm going to go ahead and add a few more different fonts before I show you how we're going to incorporate
this.
So the other one that I'm going to pick up is a handwriting font
actually, it's called Sacramento. And this I'm going to use as the font for my H1.
So a very stylish sort of font where we don't really need people to read it that clearly.
So it's not like a body font where it would be quite painful to try and read through, you know, 300
words are all styled like this.
So let's go ahead and add that too.
So we've got now two selected.
And the last thing that I want is my main heading font and that is going to be a sans serif.
And one that I'm quite partial to is the Monserrat.
So I'm going to go ahead and add that as well.
So now I've got three font families selected and I can embed it into my website as easily as copying this
link and pasting that at the top of my index.html.
Just going to paste that link in there.
And this specifies a location where if users don't have these fonts already installed or cached on their
system, then the browser will take them to this location and grab those fonts for them.
And then if we go into the style.css, then I can specify a font family that I want to use.
So the one that I want for my body is the Merriweather font, and I'm going to place that in here and
it will default to serif if something terrible happens, say the internet connection went down in the
middle of downloading the font, etc. But you can see it's not a large font stack because in pretty
99.9999% of the time, this is the font that everybody is going
to see because we are embedding it instead of presuming that people already have it.
Now, for my h1, I'm going to use the Sacramento and for my
H2 and also H3s
I'm going to use the Monserrat.
So let's go ahead and put those in there and just hit beautify to rearrange everything.
Let's hit, save, take ourselves, back over to our site,
hit refresh and voila.
Our text is now beautifully styled using the fonts that we chose from Google fonts. So feel free to
have a mess around with the different fonts that you might like or you might want to incorporate into
your website and then simply add them to your selection.
Include the link in your index.html and start using them in your CSS like
so. Now in the next lesson, I want to go and do a deep dive on different fonts and different typefaces.
What are the different families and how they came about?
So just a lesson on one of the most crucial parts of digital design, and that's of course, typography.
So if you're interested, then that is what you will get on the next lesson.
If you're not interested, then you can feel free and go ahead and skip ahead to the next lesson
where we explore some of the other font and text properties that we can use to style our text on our
website, so I'll see you on the next lesson.