Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
For this installment of the First Look series, James Williamson reviews the current implementation and future direction of web fonts: downloadable font resources that can be retrieved with the CSS @font-face declaration. The course begins with the evolution of online typography and current CSS font capabilities, and then dives into the W3C CSS Fonts Module specification, showing how to utilize web fonts, ensure cross-browser consistency, and how to use CSS3 to enhance the styling of web fonts. Font hosting services and tools such as TypeKit and the Google Fonts API are demonstrated. Exercise files accompany the course.
Defining font families in your CSS is probably nothing new for you. However if you're using web fonts how you declare your font families can change dramatically based on how your fonts are being served. In this exercise we're going to add our font-family declarations for our Alice in Web Fonts page, paying very careful attention to the syntax based on where the fonts are coming from. So I have the index.htm file open from the 04_03 directory, and I just wanted to point out couple of things to you in the HTML code first.
You'll notice if you look in the source code within index.htm that on line 10 and 11 we have the script files that are bringing in TypeKit and Google Fonts API functionality. So if you missed how to provide that, go back into Chapter 3 and watch the videos on using TypeKit and using the Google Fonts API and that'll get you upto speed on what this particular couple of lines of code is doing for us. Now I'm going to switch over to my Main.CSS. You are going to open this file up from the 0403_CSS folder.
If you're not using Dreamweaver you can even just open it up as a separate file. So now it's time for us to go in and start writing some of our font family declarations. You'll notice also that here we have the @font-face declaration that we were bringing in the last movie. But I'm going to down into that line 113 or so, where we can find some headline styles, and we have our header, main header H1, header at main header H2, so in the head of the document, Alice in Web Fonts, that's an H1, an H2. H2 is by Lewis Carroll. So we're going to go ahead and just make a blanket declaration for our headers.
So, on that blank line I'm going to type in font-family and I'm not going to use any of the generic ones that Dreamweaver is offering me. I'm going to use Old Standard TT, Didot as a fallback just in case somebody hasn't installed, who knows. Georgia, and then serif. So I'll save that. So really nothing that haven't already done if you watch the previous movies. We did that in the Google Font API one, but here we're using it in the Alice in Web Fonts as well. Now let's hold on just a little bit to find the h1 span#webHead. That's at 136.
There's a span tag that goes around the text that says Web Fonts, and I want that particular path so it's Alice in Web Fonts. So I want the web fonts section of that to be in League Gothic. So in order to get League Gothic, again I'm just going to go right into my selector and I'm going to type in font-family and here I need to use the TypeKit declaration, so league-gothic-1, league-gothic-2;. So remember when you're using TypeKit it splits the font into two files, assembles them in runtime so you have got a pass both of those declarations in.
All right now, when I keep going down to about, in the line 170s or so you're going to find the section#chapterOne header h1, so right here. section#chapterOne header h1 and I'm going to do a font-family declaration here, but here we're going to use Junction. Now because we're self hosting this, I can go ahead and declare any font stack I want here, as long as I use Junction as the first item. So I am going to say Junction, Arial, Sans-Serif, fantastic.
Now remember this name is coming from the @font-face rule right there, so those have to be the same. If you didn't change that earlier or if you'd used a slightly different declaration, you make sure you use the same one. So those have to match, all right. Okay, I'm going down to little bit further, in the 180s or so, and in that section I'm going to find the section#chapterOne header h2. I want that to be Calluna, so I need to use the Calluna stack. So here I'm going to say font-family: calluna-1, calluna-2.
because remember that is coming from TypeKit as well, so we're using the Typekit syntax there. Okay, so we just have a couple of more of these to go. I'm going to copy this Calluna stack because that's what I'm going to using next and I'll scroll down to that line 207. Here I'll find my body copy styles and in this section#chapterOne paragraph, so this is all my body copy, I'm just going to paste that font family Calluna in there, because that's what I want for that. Now just below that we have some subheadings. This section#chapterOne section.subSection h1. Those are subheadings.
And we're going to use Junction for that, so I'm going to do my font-family junction declaration. Now if you're using snippets, this is a good place to use them because it will limit the amount of typing you have to do and you won't always have to remember exactly what you typed in earlier for your declarations. So again that's going to be Junction, Arial and San Serif. All right I'm going to scroll down that line 230. We have got about two more of these to do in our footer. So I'm going to find the footer#mainFooter paragraph selector, and I'm going to use the Junction stack there as well. So again it would have been very smart, had I copied and pasted that.
Font-family: Junction, but it really doesn't take too long to type this in. Sans-serif, here we go. And then just below that we have the footer#mainFooter accent. So we have this accent text. It's going to be league gothic. So once again I'm going to use font- family and I'll just use the league gothic stack, so league-gothic-1, league-gothic-2. Okay, you know the only change that we've made here is our main.CSS.
So I'm just going to go ahead and open up my FTP client and I'm going to connect to my remote host. Now if you haven't uploaded everything yet, and by upload everything I mean the CSS, the fonts, the images, the scripts, the index file. So I'll go ahead and upload that to the server now. Now I've got everything uploaded. I just need to upload the CSS file. So I'm going to select the main.CSS, go ahead and upload that, and then I'm going to preview that in my browser. Well I can see that I'm getting the fonts that I need. Here is Old Standard TT, there is League Gothic, here is Junction so that's been hosted locally, and then just below we get Calluna. Sweet.
And then we have some Junction here as well. If I scroll down here at the bottom I can see Junction and League Gothic exactly the way that I wanted it. Now we don't have much else going on the way of formatting, so it doesn't look really good right now, but we at least have their correct fonts, being downloaded and served to the browser, both the self hosting and the hosting services that we're using. So in a lot of ways, hey man, the hard part is over. Now all that we have left to do is concentrate on formatting our text, which is what we're going to do next, starting with discussing sizing strategies for our typography.
Find answers to the most frequently asked questions about Web Fonts First Look.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
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.