Start learning with our library of video tutorials taught by experts. Get started

Web Fonts First Look
Illustration by John Hersey

Writing @font-face declarations


From:

Web Fonts First Look

with James Williamson

Video: Writing @font-face declarations

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.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Web Fonts First Look
3h 23m Appropriate for all Jan 12, 2011 Updated Dec 13, 2011

Viewers: in countries Watching now:

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.

Topics include:
  • What are web fonts?
  • Understanding the font stack
  • Using @font-face
  • Rendering basics
  • Choosing a font hosting service
  • Downloading licensed fonts
  • Generating web fonts
  • Font sizing
  • Transforming text
  • Creating special effects with text shadows
Subjects:
Web Web Fonts
Author:
James Williamson

Writing @font-face declarations

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.


Expand all | Collapse all
Please wait...
Q: This course was updated on 12/13/2011. Can you tell me what's changed?
A: The movie "@font-face syntax update" was added, which explains changes to @font-face in HTML5.
Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Web Fonts First Look.

Return to your organization's learning portal to continue training, or close this page.


OK

Course retiring soon

Web Fonts First Look will be retired from the lynda.com library on April 24, 2014. Training videos and exercise files will no longer be available, but the course will still appear in your course history and certificates of completion. For updated training, check out Choosing and Using Web Fonts in the lynda.com Online Training Library.


Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked