Fonts are absolutely critical to giving a really nice look and feel to your application. You can even see the difference, look at right here. We have pretty much all of the same components here, from a content perspective.

Look at the difference between this application, and what we have right here just on the navbar. The fonts make a huge difference, and so now we're going to learn how we can install custom fonts.

The first thing you're going to do is go to fonts.google.com. This is a great source for free custom fonts that'll look really good. They also have some really nice ways of showing how you can integrate it directly into your project.

There are going to be two fonts that we're going to pull in right now. The first is called Roboto, and you can either search for it right here, in the top right-hand side. You also have access to see it right here.

I'm going to search for it, just because I'm assuming that most of the time it's not going to be something that's readily available. You can see it is right here, and there's a couple things you can do.

When you're researching fonts, you can click on the name, and then it has all kinds of helpful details. It shows all the different versions, it shows usage, it shows some nice combinations, different things like that.

Now, you can also click on select this font, and it says you have one family selected. It gives you instructions on how to integrate it into your application. I'm just going to grab this standard link here.

Let's switch back to the code, and let's put this at the very top. You can just put it right above where it says font awesome. That's going to be the first one. Now, we also want to install a second font.

Oh, one other quick note, we need to bring in this font-family for the entire project. This is going to be the master font-family.

If you want to use something else, that's perfectly fine. Have fun, and search through the Google Font library and use whatever you want, because the process is going to be identical with what we're doing right here.

In addition to importing it, we also have to use it. So, I'm going to switch back, hit save, and come to styles.css. Right in the body, because this is going to be the master font for the entire application. Hit save, and this is going to be imported.

styles.css

body {
    margin: 0px;
    font-family: 'Roboto', sans-serif;
}

Now, the way that this works is we have a normal style declaration here, where it says font-family, and then we give the name that we want to use. The other items and you can have more than one extra one, but what this does is like you can see, if you hover over it. It says it specifies a prioritized list.

That means that the project is going to try to load Roboto, and this is the imported version. Imagine that you are, say, in an airplane and you're working on this site, and you do not have access to pull this down. Because in order to import this, this has to call a website and ask to bring it down.

This is not going to be an issue doing that for regular users, because the only way they can access your site is if they're on the Internet. That's not going to be an issue, assuming Google doesn't go down, which it is pretty reliable.

What this does, though, is it gives you the ability to have backups. Every system in the world has these fonts that are built directly into the system.

What we're saying here is if for some reason Roboto is not available, such as you working on the site when you're on the airplane, and you don't have Roboto on your system, then just use the default sans-serif font.

What sans-serif means is there are a couple different kinds of fonts out there. You're going to, as far as generic fonts, you're either going to have sans-serif fonts, or you're going to have serif fonts.

The difference is something I can show you. Let's see. I'll actually just Google it because it'll be a little bit easier for you to see. I'll say serif font. You can see right here, just by clicking on some of these images, what the key differences are.

If it's a serif font, it means it has these little edges on the end. This is just kind of a generic serif font, here.

Whereas a sans-serif font, if you click right here, doesn't. This is helpful, you can see them right next to each other. Serif has all these little curves and edges and it's a little bit more kind of old-school. Old-school meaning like a couple hundred years ago in regards to how the original typewriters used to be.

Right here, this is just more of a machine-based kind of font. This doesn't have any kind of curves or edges around the beginning or end. This is a sans-serif font. This is what we're going to use for the majority of the application.

That is all that that means. Let's put it back, so we're using sans-serif, hit save, and now we can actually go and look at the website, even before we go and import the other one. If I hit refresh now, you can see we have a different font. This is now using Roboto.

You can see right there in the body we now have font-family: Roboto, and this is looking better. It's not perfect yet, but it is looking better, so let's bring in the second font here. I am going to say clear all, and then let's search for it.

I'm going to use one called Ubuntu. I'm going to use Ubuntu Condensed. Right from here, you can either click on it, or you can just click the plus sign right from here, and it's going to have the exact same instructions.

I'm going to import this into the HTML page, so let's do it right here.

Then we want to call it, but we only want to use it on a few elements. Roboto's going to be the main font we use throughout the entire project, but we want to use this on a few custom elements.

If you come back and look at the final version, a few spots that you can have right in the nav that are going to use it are going to be the hours, the little nav links, and then the address right here. Let's go and apply those right now.

For our phone, let's come down and see where we put the phone number. It looks like we haven't added a custom one yet, so let's do that now. I'm going to say, inside of the contact-hours-wrapper, we are going to have a phone class. There we want the font-family to be the Ubuntu Condensed.

styles.css

.contact-hours-wrapper > .phone {
    font-family: 'Ubuntu Condensed', sans-serif;
}

Let's just make sure that our selector is working. If I come back here, hit refresh, you can see that that phone number's working. Except, it looks like I actually reversed it. We want the phone number to be the Roboto, I want the hours to be different.

Let's see what that hours selector is, I'm pretty sure I just used hours, and yes, that's correct. Instead of phone, just change this right here to say hours.

styles.css

.contact-hours-wrapper > .hours {
    font-family: 'Ubuntu Condensed', sans-serif;
}

Hit save, hit refresh, and there you go. Later on, we'll add some polishing touches so that we can have some of that different coloring and also the smaller font size, but we're not going to worry about it now.

Now, let's go and let's apply this to each one of these links. We're going to have a whole section dedicated just to styling these links, but for right now, let's just apply the font to them.

We know what we want to apply if you just click on inspect. We have this nav-link, so let's go and let's go and style the nav-link. We can say nav-link a tag because we want the a tag inside of that nav-link, and there we want to use that font-family.

styles.css

.nav-link a {
    font-family: 'Ubuntu Condensed', sans-serif;
}

Now, if we come and hit refresh, it's a little bit hard to see, so let's add a different color here, as well. Just because I know, especially if you're watching on video, it's going to be hard to see.

styles.css

.nav-link a {
    font-family: 'Ubuntu Condensed', sans-serif;
    color: white;
}

We'll change it temporarily right now, and we'll most likely update it so we're not using a pure white for the links. Let's just do it so we can see it, and there you go. You can see that it is using that different font.

Lastly, let's go and do the same thing for that address. We have that address-wrapper, and let's come down here. We have the address-wrapper, we're going to have to apply CSS grid just like we did before.

For right now we'll just have the address-wrapper use this font. So here, we can just copy this whole line and paste that in.

styles.css

.address-wrapper {
    font-family: 'Ubuntu Condensed', sans-serif;
}

Hit refresh, and there you go. We now have all of our custom fonts that we're going to want to use in the navbar, and we're going to be using that throughout the rest of the project, as well.

Great job if you went through that. You now know how to import and then use custom fonts in a website.

GoogleFonts