Topic 1 – Adding Fonts to CSS

Fonts can come from three different sources: fonts installed on your device, fonts hosted on third party sites and linked to your page using the link tag, and fonts hosted on the web server using the @font-face rule. Installing fonts on your device is one of the more common ways to specify fonts. When using the @font-face rule to specify web server fonts, you can take three approaches. One option is to use a hosted font library that delivers fonts to your web pages, such as Google Web Fonts or Adobe’s Typekit. The second way is to use a pre-packaged @font-face kit. Finally, you can generate a @font-face kit from one of your own fonts using Font Squirrel.

Topic 2 - Font Styling Properties

There are multiple properties that can be used to stylize your fonts. First, font-family identifies which font should be applied to your page, and can also be used on specific elements to make their font different than the font identified for the page. Within the font-family tag it’s best practice to include a font stack, which means listing additional “fallback” or substitute fonts in case your first choice isn’t available on the system. Second, font-size specifies the size of your text and can be set to absolute (pixels, picas, or inches) or relative (percentages, ems, or rems). Next, font-style allows you to apply values such as italic, oblique, and normal. Font-weight can be set to a value between 100 and 900, or lighter, normal, bold, and bolder. Finally, font-variant can be used to display font in small-caps.

Topic 3 – Text Properties

As with font properties, there are also text properties that allow you to set the smaller details. To indent text, use the text-indent tag; a positive value with move text to the right, while a negative value will move the first line out to the left of the containing element. A positive letter-spacing value with increase the overall space between letters, while a negative letter-spacing value will decrease the space between letters. Word-spacing acts the same way as letter-spacing, but increases or decreases the space between each word. Text-decoration allows you to underline, overline, line-through, or blink your text. Text-align is used to set your text to left, right, center, or justified alignment. The line-height property is the equivalent of leading. Text-transform can be used to uppercase, lowercase, or capitalize your text. Finally, vertical-align moves text up or down with respect to the baseline, but will only affect inline elements.