Now slowly but steadily,
our first website is taking shape.
And of course,
we already learned a lot about web development
at this point.
Now, if we have a look at our content right now,
we definitely see the impact of our styles.
But what we also see is that we're using the same font
for all the different kinds of texts we have.
It's always the same sans serif font,
this default sans serif font.
And that's not necessarily wrong,
but it's also very common that you want to use
different fonts on your page, that you might
want to use a different font family for the heading
than you do for the rest of your content.
And it is something which I want to do here as well.
I want to use different fonts.
Now when it comes to adding and using different fonts,
that's always tricky.
Font family sans serif is safe.
Every operating system, and every browser supports that.
The same would be true for serif, which was the default.
But if you want to use a specific font family, like Arial,
you can add that as well.
And Arial actually would be very safe because that is a
font family which is supported on a broad variety
of systems,
but not all font families are supported everywhere.
And therefore often you need to also import a font family.
So you will need to link your HTML file to the definition
of a font family so that you can then safely use that
font family in your file. And that's what I'll do now.
And for this I'll use Google Fonts.
Google Fonts is a webpage by Google, as the name implies,
and you can visit fonts.google.com to reach this site.
And Google Fonts is a page which gives you a broad variety
of free to use fonts,
which you can import into your HTML files to then use them.
And you can browse this page to find the fonts
you wanna use.
And here in my case, I already know which fonts I want
to use, so I'll search for them here.
And I'll search for Fira because I'm looking for Fira Sans.
And then you can always click on a font and see some
previews for the different versions of that font,
the different weights of that font.
And here, I want to use the regular weight,
the 400 weight in this case, hence,
I'll click on select this style here,
which opens this side menu.
And I also want to use the bold version, the 700 version.
So I'll also click on select this style.
And the great thing about Google Fonts is that it
automatically gives us some code,
which we can add to our HTML file, to import these fonts
to link our page to these fonts.
And it's this code here, which we can copy now,
and which we should add above our other link element
in the head section of this HTML file.
And you see what I imported here are, again,
some link elements now just not pointing at one of our CSS
files, but pointing at Google's servers,
Google's computers somewhere else in the web.
And in the end, they are on those servers,
it is these font families that will be made available.
So this simply imports the definitions for those
font families from Google's servers.
And that is worth noting that the ref value of link
they offer can be a relative path to one of your files,
but it can also be a full, absolute URL
to some totally different computer, as it is here.
Here, we're pointing at some server owned by Google
and that's all also possible that ref value doesn't have
to be a file owned by you, it can also be a link
to another server.
So now with that, we enable these fonts.
And actually that's not the only font I want to add.
Instead, if I go back to browse fonts,
I also want to add the Oswald font here, this one.
And there, I'm only interested in the bold version
and hence I'll select this style as well.
And now I'll copy the updated code here and replace
my old code, which we added a minute ago with it.
So that we now also imports this Oswald font.
And you should only pick the font weights
which you really plan on using here
and not import everything which is available,
because all of those fonts will be downloaded
on the computers of your users of your website.
And if you select everything here,
your users will have to download a lot
and that will slow your page down.
So here I'm only picking what I plan to use.
But with that added, if we reload,
we see no change on our page, because now we do load all
those fonts, but we're not using them.
For this, we still need to define where to use which font.
And at the moment in our CSS code,
we're still always using the sans serif font.
Now here instead now I want to use this Oswald font
for my h1 title.
And to do that, we now add Oswald here.
However, you should add it between single quotes
for those imported fonts.
You should wrap their names in single quotes,
and then add it like this.
For the paragraphs, I now wanna use Fira Sans.
And if you're not sure what the font family name is,
what you should add here,
you can always go back to Google Fonts
because you see it down there.
That's how you would add your font families.
And here you actually see that the code looks a bit
different than what I added.
We have a comma sans serif after the Fira sans definition.
And the reason for that is that we're defining a fallback
font with that.
Font family can be just one value as it was before,
and as it still is at the moment,
but you can add a comma separated list of multiple fonts,
which will be parsed from left to right.
And then those other fonts are fallback fonts.
Hence, I'll also add it here for h1.
That means that the browser will start with the first font,
but if applying that font fails,
because maybe loading that font from Google servers failed,
because they were offline or anything like that,
then the browser would move on to the next font in line
and use that instead.
And defining such fallback fonts is a good idea
because it ensures that even if your main font fails
and is unavailable, for some reason,
you still have at least some font of your choice
instead of some browser default fallback font being applied.
And with that, if we now save this and then reload our page,
now we see the text looks different.
Now we've got our own custom fonts applied.
And Google Fonts is an amazing service,
which you typically will use a lot as a web developer,
because for most websites you don't want to stick to the
default sans serif fonts or the default fonts in general,
but you want to bring your own fonts.
And Google Fonts gives you a huge library of free to use
and easy to use fonts.
And it even gives you the code,
which you need to add to then use those fonts.
And now we're also using our own fonts from Google Fonts
on this page.