We have our main heading set as Holtwood One Small Caps and we've picked …Museo Slab as our text font.…Right now, the text is still set in Georgia, so we need to fix that.…Let's look at it in the text editor.…I've already added the Typekit code for the Museo Slab from my Typekit.…You need to add Museo Slab 500 and 700 to your kit, publish it, and add your…embed code to this document so it will work on your system.…

I don't usually use fonts from both Google Web Fonts and Typekit, but when I do,…I paste the Typekit code after the Google Web Font code.…So now that your Typekit has been set up and the correct embed code is in the…document, we need to apply the font family as usual.…We need to add Museo Slab as our font family in our universal selector.…Let's go ahead and do that now, museo-slab.…

We also need to change the font-weight to 500;…Museo Slab uses a 500 and 700 for regular and bold.…And then down here in the h2, let's change our bold to 700. We can save that.…Now in order for us to see this font in action, we need to upload it to our servers, …

Resume Transcript Auto-Scroll

Author

Released

6/27/2012

This course focuses on the theories behind web fonts: what makes a good font, why different fonts look the way they do, and how fonts affect the look of a web page. Author Laura Franz covers common tasks, including downloading a font from an online source such as Typekit or Font Squirrel, implementing the font in HTML and CSS, and changing the size and line-height to improve the readability of text. The course also covers different periods of type design and explores the history behind handwritten fonts, text fonts (used for large amounts of text), and display fonts (used for headlines).

Topics include:

Explaining the history of text fonts, from Old Style, Transitional, and Modern to Slab Serif and Sans Serif

Understanding font classifications

Setting up a Typekit account

Choosing a quality font based on forms, spacing, and weights and styles

Accessing fonts from various sources

Implementing fonts with the @font-face syntax

Looking at how fonts affect the look and feel of a web page

Changing font styling to improve readability

Making various font weights and styles work correctly across multiple browsers