Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now that we know a little bit more about @font-face, let's use it on our trail guide page to enhance our design. Now I want to point something out that's really, really important about this. Due to licensing issues your exercise files do not contain the fonts that I'm going to be using. If you didn't watch the previous movie, which contains instructions on how to download and save the files for this exercise, please go back and do that now. Once you've downloaded those fonts, and if you want to use a different font-family that's fine by me, feel free to do any font-family you want, but once you've downloaded them, here is where you need to place them.
Go in the Chapter_07 folder, you are going to look in the set 07_06/_assets and you're just going to place them there. So you can see in that folder currently I have got all of those font types for both ChunkFive and Mido that I got from Font Squirrel, so you want to go ahead and grab those as well. I'm also going to advise you, if you did the @font-face kits that I was talking about in the previous movie, go ahead and open up the CSS for that and copy the @font-face for both of those. It's so much easier than typing it yourself.
You're not as prone to make mistakes and I am going to be copying and pasting a little bit myself here too, just to keep this video from being 20 minutes long. But I'm going to go overall the syntax for you guys, so that you understand kind of what's happening. Now speaking of that, you'll notice that I have the main.css file open from the 07_06/_css file. You also want to have the trails.htm file open, because that's the one that you are going to be testing. All right, so I have got my main.css open and what I am going to do is just below the color guide of the styles but above the limited reset, I am going to go ahead and do both of my @font-face declarations.
See how easy that is? That's really easy if we're copying and pasting. But let's go over everything in case you are not. So we do an @font-face declaration, inside of that we do font-family and then we type in what we want to call this font within our styles. Just because Font Squirrel did MidoMedium and ChunkFiveRegular, it doesn't mean that I have to. I could just do Mido if I wanted to. I could call it Chunk if I wanted to. This is totally up to you, but it is how you're going to reference the fonts later on. So make sure you use something that's easy for you to remember and easy to spell, easy to type, that sort of thing.
Now I want to point out one thing here that is very different than the Font Squirrel syntax. You'll notice that I have appended to the front of these ../_assets. That's because this is the location of the font resources that we are going to be accessing for our files. So if you are going to host these up on your own server, you need to go ahead and make sure that the path to the font formats themselves point to the proper location. Also notice that copying and pasting allowed me to use the smiley face, because I don't know how to type that in using the keyboard.
If anybody does know that you can send me an email. I would love to learn that. So other than that we have our font formats here. So after the eot, which remember Internet Explore is going to use this one, we use the syntax that Internet Explorer does not understand, which is to split the URL and the format declaration. Notice that these are separated by commas and one source property. So we have a comma then we do a truetype, then we do another comma and then we do our svgs. You will also notice they follow up with the font way in a font style, which essentially just tells browsers, just gives them the default styling and saying we are going to use the normal version of both of these fonts.
Okay, so obviously that can take a little bit of time to type out. You can sort of pause the video and type those out, but again, if you've downloaded those from Font Squirrel you can just copy and paste them yourself. Okay, so now that we know that, let's take a look at how we actually use this in our styles. What I am going to do is just scroll down and I am going to find the header section in the presentational styles. So here we are around line 89 or so, and so what I want to do is I want to find the header#mainHeader ul li a, and for me it's about one line 118. It's right there.
And what I am going to do is create a blank line at the very top of this. It doesn't have to be at the top, but I would like to put my font declarations there, and I am going to type in font-family and then I am going to do a font-family declaration unlike the normal ones I do. I am going to do ChunkFiveRegular. So spelling obviously counts here and so does capitalization. So ChunkFiveRegular. I am going to follow that up with 'Arial Black', Arial, serif. Now that's just me saying okay, if ChunkFiveRegular for some reason doesn't work or is not available, go ahead and use Arial Black.
If you don't support that, go to Arial. If you don't support that just give me your normal serif font. Now there is no needed to for me to type this over again. I am just going to copy this, or you could save it in a snippet if you'd like, and I am just going to paste it wherever I need this particular font. So I am going to stay in the main header region and I am going to find the hgroup h1 selector here, h1, hgroup that's the main headline on the page. I am going to paste that in and I am going to do one more thing to this one. I am going to do a text-transform property and I am going to transform it to uppercase, so that the main headline is in all caps.
It will make it look really cool, especially with this particular font. I am going to stay in the mainHeader group and I am going to go down to the very next selector, which is the h2 selector. Well, actually you know what? I am going to skip that, because that one I am going to use Mido for and I have got this in my clipboard, so I want to just keep going down to the ones that need ChunkFive. So I'm going to go down to the trailinfo article. So trailinfo article h1, that's the selector I want next, this one is on about line 165 at the moment. I'll paste that one in, and then finally I am going to go down to the aside styles.
I am looking for the aside#trailNews h1, which is right here on line 227 at the moment, and I am going to paste that. Okay, cool. So now all of our ChunkFive ones are done. I now need a couple of them that are going to be Mido. So I am going to go back up into my header grouping. I am going to find my mainHeader hgroup h2. That's the tagline and right at the top of that, I am going to do another font-family declaration, and this one is going to be MidoMedium, Georgia, serif.
Yeah, I agree the workarounds and all that syntax that you have to do for browser support are a little bit tedious, but I'll be honest. It's a lot less complicated than many of the alternatives, and I got to mention, as you can see, our page looks great.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 100111 Viewers
56 Video lessons · 113145 Viewers
71 Video lessons · 82010 Viewers
131 Video lessons · 39347 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.