14.1 Custom fonts - Video Tutorials & Practice Problems
Video duration:
26m
Play a video:
<v Instructor>The first little bit of polish</v> we're going to add is a series of changes related to custom fonts. Now what are some of the things that custom fonts can do for us, Lee? <v Lee>Well, obviously the first one is</v> that we can use custom fonts to replace the fonts on a page. So the way that text looks. So all of this can be changed. So normally you're limited to browser default fonts, which just happen to be the fonts that are installed on different computers' operating systems. So Windows has one set of fonts, macOS has another set of fonts, Linux has a set of fonts. And there's some overlap between those, but they're not the same on all of them. So custom fonts let you load in new fonts. But you're not just limited to the fonts being letters. So people who have been around computers for a while, remember the Wingdings font, which was a font where you could type and little icons would come up. So you can actually use a custom font to insert icons onto the page. And we're gonna use that to replace our social links here, where we have Facebook, Twitter, and GitHub with the icons for those services. And instead of using an image for those icons, we're gonna use a font. And the advantage to using a font is that fonts can be any size and it maintains crisp resolution. There's sharp lines around the whole thing. So it's a really, really cool way to add little design touches, and specifically what we're gonna be using as an icon font called Font Awesome. And they don't just have icons for things like social media websites, they have icons for basically anything that you would want on like a website or a web application. And it allows you to just use this one font instead of having a whole bunch of different images that you have to take care of. <v ->Cool, let's take a look at Font Awesome.</v> All right, here's Font Awesome, the iconic font and CSS toolkit. And we can just download it from here. <v Lee>Yeah. But here first.</v> <v Instructor>Oh, you wanna take a look?</v> <v Lee>Yeah.</v> Go to the icons. <v Instructor>Here.</v> <v Lee>Yeah.</v> And if you scroll down, you'll see a ton of different things. <v Instructor>Oh Yeah. Look at that.</v> <v Lee>And then if you click on one.</v> <v Instructor>Let's look at, what was our first one?</v> It was Facebook. <v Lee>Yeah.</v> So if you look at this, you can see it's all those different sizes and it's very clear and sharp. And if you try to do the same thing with an image, you'd either have to start with a really big image and then scale it down, or your image would look really crappy. But vectors are just a bit of math. So if you want it bigger or smaller, you just multiply the math by whatever number you want or divide it by that. So it can be whatever scale you need it to be. <v Instructor>Okay.</v> So these vector fonts are really good for things like icons on webpages because they scale up and down without any loss of resolution. <v Lee>Exactly. And they stay really crisp and clean.</v> And because it's just a bit of math, you can actually make them any color that you want, which is also really cool. <v ->Oh, let's see.</v> <v Lee>So if we were to inspect element,</v> you can use this and recolor things on the fly using just CSS. <v Instructor>Ah, look at that. That's cool.</v> <v Lee>And you could never do that with an image.</v> <v Instructor>Yeah.</v> All right, so our first order of business then is to replace these with the corresponding icons. <v Lee>Right. So there's two different ways to do that.</v> You can load fonts into your style sheet from across the internet, and we'll do that later. Or you can actually download the fonts into your project and then link to them directly. And so we're gonna do that this time for Font Awesome. <v Instructor>Okay.</v> <v Lee>We're gonna put it in the actual folder.</v> <v Instructor>So let's download it.</v> Okay. And then. Where does it go? Is it in the style sheets folder or do we just put it in the route? <v Lee>We are putting it in its own folder.</v> <v Instructor>Okay.</v> <v Lee>So that we keep all the fonts in one place.</v> So it'll be in a new folder called Fonts. <v Instructor>Okay. So let's do that.</v> We're gonna move it to, oh, we're gonna actually make a fonts directory, so. <v Lee>Mm-hm.</v> <v ->So let's make mkdir &&,</v> then move it to the fonts directory. There we are. And then we probably have to include it, right? Let's take a look at that. <v Lee>You mean link to it?</v> <v Instructor>Well, yeah.</v> So we have to, I mean, just include it in the project. <v Lee>Yeah. We have to use a link to it.</v> Yeah. <v Instructor>Okay.</v> And that's a style sheet link, right? And should be before main.css, right? Because- <v Lee>Yeah, it needs to go before main.css.</v> <v Instructor>Okay. Let's link to it then.</v> Same thing as we usually do. And then- <v Lee>So, yeah.</v> Let's take a look at where it is right now in our project directory. <v Instructor>Yeah.</v> <v Lee>So open up the Font Awesome directory,</v> so we can see the contents. So there's a CSS folder in there. <v Instructor>Yeah.</v> <v Lee>And this contains the full CSS and a compacted one.</v> So we need to link to this file that's inside of CSS, which is inside of Font Awesome with the version number. Depending on when you watch this, the version may change because Font Awesome just recently I think preview released Font Awesome 5, but eventually that'll be available for everyone. So yeah. That's 'cause of the check. <v Instructor>Yeah, this is the kind of thing</v> that you can use your technical sophistication, but for now we're going to do the Font Awesome. 4.7.0. <v Lee>Mm-hmm.</v> <v Instructor>/css/</v> font-awesome.css and close it off. And then we can test it. I noticed before we saw the icons, we can test it by putting in the code, and it uses the i tag, right? This is the italic tag, sort of an older tag. <v Lee>Exactly. So it's a deprecated tag.</v> We've moved to the, em, the emphasis tag for making italics, as the preferred way of doing HTML. But the old i tag is still a part of the spec, and Font Awesome likes it for an icon, and actually, I kind of agree. It's nice, it stands out when you see it in a page. <v Instructor>Yeah.</v> All right, well, we can copy this. If we look at the small print, it says, "To improve web accessibility, we recommend using aria-hidden true to hide icons used purely for decoration." But this is not purely for decoration, so remove that. This is on index. It's actually, it was FB, right? Yeah. There it is. So we wanna replace this with, it just goes in here, is that right? 'Cause we still want it to link to it. <v Lee>Yes.</v> That's (indistinct). <v Instructor>So should be like this.</v> <v Lee>Or we should break it down onto its online.</v> <v Instructor>Yeah.</v> Like that, and then get rid of this aria-hidden true. Okay. Well this worked, let's take a look. So it's right here and, look at that. Maybe not quite the right size, we can change that in CSS as you were saying, because it's a vector font. We can actually manipulate it using CSS, but that's good. It's a good start. <v Lee>It's a little small, but not hard to change.</v> We should replace the other ones though, while we're at it. <v Instructor>Okay.</v> Let's take a look at the Tw. I bet I can guess the answer. I'm gonna, well, I shouldn't copy that one. Let me copy this one up here. I'm gonna guess that it's, so fa here is not Facebook, fa is Font Awesome. <v Lee>Font Awesome is correct.</v> <v Instructor>I bet if I change this to Twitter,</v> that it's just going to work. <v Lee>That's some technical sophistication right there.</v> <v Instructor>That's right.</v> Oh, look at that, there it's a little bird logo, and then GH. The same thing, I'm also going to guess the answer. We could look at the Font Awesome website where we just were. If we went to the icons, we could search for it. There it is. But we don't have to because we can guess, and this is also gonna be easy to guess, GitHub. Okay. And there it is, is the octocat logo, and yeah, it's looking good. So there's actually one other thing I realized, we use this Twitter logo in some other places, right? <v Lee>Right. We use it all over.</v> <v Instructor>All right,</v> why don't we search for that globally, and copy this here. Okay, so it's here. Okay, so we can just do that. Yeah. So I searched for the closing tag Tw opening tag, just closing, get a part of the tag. So like the greater than sign. And then Tw and then the last end sign. So it picked up all of those occurrences. So these are in the bios. And then where else was it? It was also in the blog post, right. So. There's that and anymore? Yep. There's one here and this, the post layout. All right, looks like we got 'em all. Double check it, there it is. Let me get you down here. All right, before we start styling these vector icons, let's take a quick look at the Font Awesome source code itself. This is just for general interests, not something you have to understand, but it's quite instructive to see some really advanced CSS, to see how a place like Font Awesome handles some pretty sophisticated problems. So we saw it here. <v Lee>And just a good idea in general,</v> to understand what's going on with font faces and loading in custom fonts. <v Instructor>Yeah.</v> So it's actually, it's in our project, we can do, where it is, Font Awesome. <v Lee>So the very-</v> <v Instructor>Yeah, what's going on here?</v> <v Lee>Yeah.</v> So what's going on here is the very first thing up here is, the at font face declaration. And so if you were manually adding a font to your website, you would use this for each one of the fonts that you want to show up. And what happens is you give it a name where it says font family, Font Awesome. And this is kind of the opposite of normal font family. So normally, if you're styling an element and you say font family, you're actually saying, oh, I want any text inside to be that font family. In a at font face declaration, when you say font family, you're actually defining the name of it, that it would be called by the rest of the CSS. So when Font Awesome is written over here in this, where it's calling, it's referencing this name. <v Instructor>I got it.</v> <v Lee>So like, if we had</v> a bunch of different weights of this or styles, so if we had like a bold and an italic, each one would have the same name of font family, Font Awesome, and it would look exactly the same. <v Instructor>Right, it would change these.</v> <v Lee>Yeah. We'd change these things.</v> So for bold, it would be font weight bold, font style would be italic, and then it would point to a different file. And so what's going on here, (chuckles) is fonts are one of those places in HTML and CSS where unfortunately, the haphazard nature of the process has led to us needing to have a bunch of different fonts for this to work on as many browsers as possible. <v Instructor>I see iefix.</v> I know what that is, that's Internet Explorer. <v Lee>Exactly.</v> So you scroll through here, and there's gonna be like six different file types that will be here, or like five different file types that are being called. <v Instructor>Yeah.</v> <v Lee>Each one of those is for a different browser</v> that supports only a couple things. So it's really kind of obnoxious that this is how it is, but this is how it is. <v Instructor>Yeah.</v> <v Lee>This is why it's really nice</v> to use someone else's fonts, instead of actually having to write this stuff out yourself, because things just go wrong with this, I promise you. <v Instructor>Yeah.</v> <v Lee>You'll find some way to mess it up.</v> <v Instructor>Okay.</v> Well, it's good, this is pretty advanced CSS, but it's like they do it so that we don't have to, basically. <v Lee>Right.</v> And then, so what's happening down here is, the FA, that class that you asked about, it's just setting the, i, the italic HTML element to inline block so that it, we can give it height and width and things like that. <v Instructor>Yeah.</v> <v ->And then the additional styles actually</v> are using the content tag that we've used before, and the before. So it's just throwing a character into the before pseudo element. <v Instructor>Yeah.</v> <v Lee>And then these characters,</v> it's like a character code. <v Instructor>That's weird.</v> So it must be in, like using that, like basically is like a key somewhere right through the Value. <v Lee>Exactly.</v> (indistinct) So in the actual font file itself, all the different glyphs, that's what that individual shapes are called, in either letters or icons, they all have an identifier. And so each one of these content things is just pointing directly to a glyph identifier. <v Instructor>What's the back slash F mean?</v> Do you know offhand? <v Lee>I don't know offhand.</v> <v Instructor>Yeah.</v> So that's some of the magic of Font Awesome. <v Lee>Yeah.</v> <v Instructor>It's probably some sort of escape code.</v> We could figure it out, but- <v Lee>I'm pretty sure that's-</v> <v Instructor>We don't have to know.</v> <v Lee>I'm pretty sure that's part of the identifier</v> within the font file. <v Instructor>Yeah.</v> <v Lee>I just, yeah, never looked into it that far.</v> <v Instructor>Cool.</v> All right, well, it's one of those things where it's important to know which things you don't have to know- <v Lee>Exactly, exactly.</v> <v Instructor>And you don't have to know</v> what those are exactly. <v Lee>It's nice to completely ignore this. (chuckles)</v> <v Instructor>All right, so let's close this down,</v> and start styling. Take a look, we wanna open up our CSS file. <v Lee>Yep. And we're gonna go to the social link.</v> <v Instructor>Not that one, not that one, that one.</v> The main one. <v Lee>And so we need to make it a little bit bigger.</v> <v Instructor>Right so your font size.</v> <v Lee>They were looking a little small.</v> So something like 1.7, and remember this kind of stuff, it's arrived at from tinkering. <v Instructor>Right, let's take a look here, refresh.</v> Oh yeah. Okay. <v Lee>So, because we did our width and height</v> and padding in ems, increasing our font size also increased our width, our padding, our height, all that. So we need to drop those a little bit, so. <v Instructor>Right.</v> <v Lee>Let's try a height and width of 1.5 em.</v> <v Instructor>Right.</v> <v Lee>And we're gonna do a padding top.</v> <v Instructor>Oh yeah. Look at that.</v> Now there's too much padding. I see it. So, padding top. <v Lee>We're gonna do 0.25.</v> <v Instructor>Okay. Let's try this out.</v> Uh-huh, look about that. It's looking pretty good. Just with a few rule changes. It looks like there are probably some tiny details we could work on if we wanted to. <v Lee>Yeah.</v> So there's gonna be different line heights between them, so the Facebook and Twitter ones look a little higher than the GitHub one. <v Instructor>Yeah.</v> <v Lee>Theoretically you could just target the class,</v> the specific class and- <v Instructor>Yeah, like F put,</v> it was like fa-Facebook, for example. <v Lee>Yeah.</v> So you can do that if you really want to, and give them a little bit of tweak to move them down one pixel or so, but that's a lot of work for a little bit of payoff. But sometimes you gotta do it. <v Instructor>All right,</v> well, this is a big improvement already. We can see down here too. Look at that, looks really nice. And they are still just regular links. So if we click on them, they actually will open up. <v ->And you can see the-</v> <v ->That's cool.</v> <v Lee>The color change is applied.</v> So in the rest of the page it's white, but up there, we've got that blue color, that dark blue for the icons. And it just pulls that right from the CSS. <v Instructor>That's great.</v> Cool, and we saw over here that it just has a huge number of icons. For company logos, there's Tripadvisor, Snapchat, Skype. And then also sort of generic things, like we've got arrows. It's great. I mean, so there's just a tremendous amount of flexibility and power from this set of fonts. And because they're vectors, we can scale them up and down, change their color, do all kinds of fancy things, just in CSS. That is pretty cool. All right, well, that's a big improvement already. So this was just changing these icons, but we talked about the letters too. So- <v Lee>Yeah.</v> <v Instructor>The next step</v> is to give some little attention to these fonts. <v Lee>Right.</v> And instead of loading the fonts locally from our project file, we're going to load them from the internet, and we're gonna specifically load them from Google. <v Instructor>Okay.</v> So Google has a service called Google Fonts, right? <v Lee>Yep.</v> And Google Fonts has a whole lot of free fonts that you can use to make the text on your website look far more interesting than you could otherwise. <v Instructor>Yeah.</v> Right now, just to remind ourselves, we're using, I think Helvetica is that right? Something like that by default? <v Lee>Right.</v> And Helvetica is not by default on Windows computers. So for Windows computers, you'd probably be seeing Arial. <v Instructor>Yeah.</v> <v Lee>Unless someone happened</v> to have installed Helvetica themselves. <v Instructor>Right.</v> <v Lee>But you don't wanna count on that.</v> <v Instructor>Right.</v> So what we're gonna do is replace this sort of reasonably nice, but kind of generic looking and very common font with something that's a little bit more customized to our website that lets us reflect the kind of branding that we want. <v Lee>Right, so-</v> <v Instructor>And the choice of fonts.</v> <v Lee>For these headers, we're gonna use something</v> that's really skinny and thin. <v Instructor>Okay.</v> <v Lee>And then we're also gonna replace</v> the body copy font. So just the generic. <v Instructor>This here.</v> <v Lee>Yeah.</v> So that we define what the fonts are, top to bottom. <v Instructor>Right.</v> Cool. So, all right, let's take a look at Google Fonts. So how do we get started with this? <v Lee>So this is Google Fonts,</v> and they've got like I said, a ton of fonts. Like you can scroll through here. <v Instructor>Yeah.</v> <v Lee>They've got nearly a thousand</v> different fonts for you. <v Instructor>That's amazing.</v> <v Lee>So what we're gonna do here,</v> is search for the one that we want, because we already found it, as opposed to just scrolling through. <v Instructor>Yeah.</v> <v Lee>So we're looking for one called Raleway,</v> and this is gonna be our header font. <v Instructor>It's R-A-L-E.</v> So how do I get, (indistinct) plus. <v Lee>To add it to our collection?</v> Yeah, press the plus. <v Instructor>What happened there?</v> Is that it? <v Lee>No, it changed it again.</v> (indistinct) Remember you have to cancel. <v Instructor>Oh, great. (chuckles)</v> Look at that. Stupid. This is macOS or Safari. It's saying, there we go. Okay. That was funny. It's like the browser thought I was smarter than I was. Which I hope is not the case. All right, so this is Raleway, it's a nice looking font. <v Lee>And if you actually wanna see details,</v> you can click on it. <v Instructor>Okay.</v> <v Lee>And it takes you to the whole font page.</v> And you can see this comes in a bunch of different weights, and a bunch of different styles, so. <v Instructor>Yeah.</v> <v Lee>Specifically, we're only gonna use</v> the thin one up here. We're going super, super thin on this one. So then for our body copy, we're gonna use Open Sans, which is a free kind of Helvetica clone. So we're gonna add that as well. <v Instructor>Okay.</v> <v Lee>So Google fonts added that to a cart,</v> I guess you could call it. <v Instructor>Yeah.</v> <v Lee>And so what we're gonna do,</v> is we're gonna go in here and customize these things, because what we have to pick out, is our weights. You don't wanna load all of them, because it's like loading a big image file, it'll slow down the load time for the whole website. So you just wanna pick the weights that you want. So for Open Sans, we're gonna just take regular. <v Instructor>Okay.</v> <v Lee>And for Raleway, we're just gonna take thin.</v> <v Instructor>Okay.</v> <v Lee>You know, you can pick more of these</v> if you want to use different weights and styles, but for now, we're just going to do it with these two. We have a very simple site. <v Instructor>Embed.</v> <v Lee>Yes.</v> <v Instructor>This is where we can link it,</v> so this is great. Just copy it. <v Lee>Yes, and then below you see how you call it.</v> <v Instructor>Ah, yeah.</v> Cool, so let's put it over here and, oh no, this is the wrong place. We wanna include it here. And we can put it either place really, but let's put it as the first one. I wouldn't say either, I mean, either before or after Font Awesome. It has to come before main.css. <v Lee>Correct, correct.</v> <v Instructor>So let's do that.</v> Can save it there, and then we can use it, like here, the font family. So where were the places we wanted it for? <v Lee>So yeah, there we go.</v> <v Instructor>The body, what do we wanna do?</v> So the body was gonna be Open Sans? <v Lee>The body is Open Sans,</v> and it's in single quotes so that it's all one object. There we go. <v Instructor>Actually, I could have just added it</v> to the front. <v Lee>And then we're gonna add a new declaration.</v> <v Instructor>Okay.</v> <v Lee>To style all of our headers.</v> <v Instructor>Nah, I'd probably put it down here.</v> <v Lee>Put it at the top.</v> <v Instructor>At the top of before h1.</v> <v Lee>Mm-hmm.</v> <v Instructor>Okay, and-</v> <v Lee>And so we're gonna do h1, h2, h3. (indistinct)</v> Here we go. H1 through h6. <v Instructor>Right.</v> <v Lee>Because there's only six header types.</v> And so we're gonna do font family Raleway. <v Instructor>Okay, is there a reason</v> we don't have Arial here? <v Lee>It just doesn't really matter.</v> <v Instructor>'Cause it's gonna load Raleway.</v> <v Lee>Yeah.</v> Well, and then also the Sans would load Arial too. <v Instructor>Okay.</v> <v Lee>And then we have to change the font weight</v> because we're specifically using font weight 100. <v Instructor>Right.</v> <v Lee>From our little picker on the Google Fonts site.</v> <v Instructor>Right. That was over here.</v> Right? <v Lee>Yeah, exactly.</v> <v Instructor>Then 100. Okay.</v> What does this 100 refer to? <v Lee>It's just the way</v> that different font weights are defined. So a bold is like a 700, extra bold is 800. <v Instructor>Interesting.</v> <v Lee>Normal font is 400.</v> I think it probably has something to do with, in the olden times when you actually had physical things. <v Instructor>Yeah.</v> <v Lee>Something tells me</v> that there's some connection there. I don't know what it is. <v Instructor>Interesting.</v> All right, let's take a look at our site now. This is a good example, we've got a header here and body copy. So if we refresh this, it should change both. <v Lee>Boom!</v> <v Instructor>Look at that.</v> Yeah. It's nice. It can go up here. It's a very elegant thin font, body copy looks good. There it is. Nice. It definitely gives it a sense of polish and differentiation from every other site you've ever seen. <v Lee>Exactly.</v> <v Instructor>Fonts really are an important part</v> of the design, aren't they? I mean, text is such a huge part of the web, that it's important not to ignore or neglect fonts in our design. <v Lee>Right.</v> Especially when it's so easy to change and there's resources like Google Fonts that let you do it. <v Instructor>That's great.</v> So this is delivered right out of Google CDN, and there's a disadvantage, right? Because if somehow the Google CDN goes down, like fonts.googleapis.com. If that's down, then it won't load these fonts. But we do have this backup. And so it's not a catastrophe for us if it does go down. It's not quite as robust as having it locally, but it's really nice not to have to download it and load it separately. Is that right? <v Lee>Exactly.</v> <v Instructor>Plus it's cashed,</v> everyone's using these things around the web (indistinct) sites. <v Lee>So then that way you're not,</v> yeah, you're not loading those from your own site. <v Instructor>Yeah. Okay.</v> So there's some real advantages to doing it remotely like that. <v Lee>Exactly.</v> <v Instructor>Cool.</v> Can you do that with Font Awesome? Do they have a CDN? <v Lee>They do.</v> They do. <v Instructor>Is it a little slower or?</v> <v Lee>No, no.</v> We just, we use the download one just to show the two different ways of handling font files. <v Instructor>Got it.</v> <v Lee>Most of the time we use just the CDN anyways.</v> I mean, it's just like, it works just like Google Fonts. <v Instructor>Yeah.</v> <v Lee>So if we go over here, boom, there you go.</v> <v Instructor>Yeah, there it is.</v> <v Lee>The only difference is</v> that you have to add a new email address these days, to give you a different embed code. So this was, it was easier to do the download version. <v Instructor>Got it. Cool.</v> All right, well, this is a big improvement. I like that we have this custom font here and the header, and these icons are a major improvement over just having the letters. <v Lee>Oh yeah.</v> Cool.