Google Fonts

[00:00:00]
>> Jen Kramer: Great, so let's go on ahead and open up another tab here. We are going to fonts.google.com. There is a our website, fonts.google.com. And so as of today, there are 900 fonts available here in Google Fonts, 900. If you can't find the font you want, you might try getting less picky, okay?

[00:00:26]
It's in here somewhere. So as you can see on this page, these are all of the fonts. They're sort of listed here. The current listing is in trending. So if you look over here on the right-hand side, it says we're sorted by trending. So in other words Roboto is currently very popular, Poor Story, Spicy Rice.

[00:00:47]
These are some of the very popular fonts at the moment. You can sort these differently, so we can just say what is popular. Shockingly, Roboto is still popular. Actually, notice that a lot of these fonts are very plain. Because a lot of people are using these just for regular text on their websites, okay?

[00:01:06]
You can also sort these by the date added, or alphabetical order whatever it is that you wanna do. I'm just gonna go ahead and sort mine by alphabetical order. There are languages that are available, so we as English speakers here in the classroom, these fonts typically work very well with English.

[00:01:24]
If you're speaking another language, specially those that are not using this type of alphabet, there are other choices for you here. So for example, if you are Vietnamese, there is a Vietnamese option here. And it'll go ahead and give you the whole page here in Vietnamese with all the various accents and so forth that are important for that particular language.

[00:01:46]
So that's a very nice feature as well. Okay, so what I'm going to do here is I'm gonna show you that we have some categories over here on the side. Remember, we talked about serif and sans serif. Now display tends to be for larger type, if you were making a billboard that would be a reason to use display.

[00:02:08]
There's also handwriting fonts and monospace. I'm a big fan of the handwriting fonts, I just find them fun. So I'm gonna go ahead and just say, show me all the handwriting fonts. And you can pick whatever you wanna do. And as you scroll on down here, you can see all kinds of different fonts that you could include on your web page here.

[00:02:30]
I'm gonna go to this one here that's at the top here, it's called the Architect's Daughter, okay? So if we go ahead and we click on this, you can type in anything you want here. Frontend Masters Bootcamp, okay? So I can see exactly the text that I want to show.

[00:02:49]
I can see exactly what it's gonna look like in that font, which is really nice.
>> Jen Kramer: Google will give you sentences for example, or paragraphs, or just the alphabet, so you can choose those options. You can also choose your font weight, you can choose the size. So this is just as you're looking at this, and as you can see, probably this is enormous time sink.

[00:03:16]
You can spend hours here looking for the perfect font, okay? So let's just say you found it. Once you find it, whatever that font is, up here in the upper right corner of the font there is a little plus sign. So you can go on ahead and add this, and a little pop up will show up down here at the bottom.

[00:03:34]
If we go on ahead and click that, this is gonna tell us how exactly we can include this font in our web page, okay? And you might notice that under embed font on standard, look at this. Does that look familiar?. Does that line of code look familiar?. Yeah, that's a line of code that links to a style sheet.

[00:04:01]
So what we're gonna do is we're gonna go ahead and copy that line of code. And then right on in your HTML, you can go on ahead and include this. Obviously, that should go in the head of your document. I'm putting mine in a code pen, so I'm just gonna put it at the top here on my code pen.

[00:04:20]
There may be a way I can do this more properly, but I'm just going to stick it right here at the top of my HTML and my code pen. If you're following along with your actual files, you would definitely wanna put that in the head of your document along with your other style sheet.

[00:04:36]
And I would recommend putting it before your style sheet. So the first thing that's gonna be listed in order is going to be a link to this Google Font. The second thing that's gonna be listed is your style sheet you've been working on so far. Why are we going to put the Google Font first, and your style sheets second?

[00:04:53]
Why would we list our our CSS files that way, yeah?
>> Speaker 2: In case we're overriding it in the style sheet somewhere?
>> Jen Kramer: Yeah, yeah, in case we're overriding, [CROSSTALK] Or in case we're actually calling it, right? Notice that nothing changed on this page. I linked to the style sheet, but nothing changed in my code pen, did it?

[00:05:14]
>> Jen Kramer: So what have I done so far?
>> Jen Kramer: I linked to the font, that's all. I haven't actually said display anything, okay? So this is a two part process. So the second thing I need to do, is down here, just scroll down in that same window a little further, see here where it says use the following CSS rules to specify these families.

[00:05:39]
And then it gives us more CSS that should be familiar to you, right? Font-family Architects Daughter, cursive. So if we go ahead and copy that,
>> Jen Kramer: And we jump into our form here, I'm gonna scroll on down. Well, I don't actually have a style for my h2. I'm gonna apply it to my h2.

[00:06:01]
So I'm gonna go ahead and make a style for my h2, and simply paste in my font-family there. And this may not work at all in code pen. So as I just said, you're not really supposed to put your link to your style sheet up here. I have just been told this is the way that you do it.

[00:06:21]
I'm gonna go ahead and take it out of where it's not supposed to go and it doesn't work. And when I go up here to Settings. And if you notice here under HTML in the settings, look here, here's the stuff for the head. So we'll go ahead and paste in the link to my style sheet here,

[00:06:43]
>> Jen Kramer: And then say, Save and Close.
>> Jen Kramer: And is it gonna work now? I do have an h2, right? I have an h1, that's the other problem. It doesn't work when the tag doesn't exist. I'm sure I surprised you by that, there we go, now it works, okay?

[00:07:05]
Gotta make sure you have the right selector for what it is you're trying to select. So there we go, there's the h1, and now you can see it's here on the page. And I could put this in other places. Maybe I also want it to be on the legend, on my form, that's kinda cool looking.

[00:07:21]
Maybe I want it over here on our location, maybe that's the h3. Is that an h3? I don't know what that is over there, let me look and see.
>> Jen Kramer: That is an h3-
>> Speaker 2: Just need the comma-
>> Jen Kramer: ,legend, there we go. So now I can apply that style and that font pretty much anywhere I want here on the web page.

[00:07:45]
Any questions on web fonts so far, yes?
>> Speaker 3: So because we are in the head we're linking to, in this case, Google Fonts-
>> Jen Kramer: Yes.
>> Speaker 3: That means that in order for somebody to see our font Google has to be up.
>> Jen Kramer: Correct.
>> Speaker 3: And like, online, the fonts still has to be there.

[00:08:02]
>> Jen Kramer: Correct.
>> Speaker 3: So we're relying on both our code working and Google's code working.
>> Jen Kramer: Correct, that's an excellent point. So when we rely on these web fonts, we're relying on the fact that Google has a server with these fonts on it that is currently up. If Google goes down, it happens every once in a while, the Internet totally freaks out.

[00:08:22]
But if Google goes down then your font is also going to be down. And that is why in the declaration here it says, font-family as architects comma cursive, right? So the generic cursive font is going to display if Google Fonts happens to be down in Architects Daughter is unavailable.

[00:08:39]
Does that make sense? If you wanna get picky about it, you can also of course, you can add to this font stack. You could also say, Arial and Helvetica, right? Something like that. There is nothing wrong with putting extra fonts on there.