CSS Fonts, Decorating and Alignment

Topic Overview

Typography

Typography Typefaces Font Categories TODO

Using Fonts

The font-family Property Fallback Fonts and Stacks Making Font Choices TODO

Sizing

Setting Size Fixed Size Relative Size Using Sizes TODO

Adding Meaning

Setting Bold and Italic Font Weight Font Style Using Weights and Styles TODO

Decorating

Font Variant Text Transform Text Decoration TODO

Spacing

"Space: The Final Font-tier..." Leading Kerning Tracking Word Spacing TODO

Alignment

Horizontal Alignment Vertical Alignment Indentation TODO

Pseudos

Pseudo-Selectors Pseudo-Elements Pseudo-Classes Setting States TODO

Self-Hosted Fonts

Including Fonts Fonts Directory Fonts Stylesheet The @font-face Selector Family Source Other Properties The @font-face Rule TODO

Library-Hosted Fonts

Sourcing Fonts Navigating Google Fonts Option A - Downloading Fonts Option B - Standard Embeds Option C - @import Embeds TODO

Sourcing Fonts

Sometimes, as with embedding movies and audio, it is easier and more efficient to utilize a service that will deliver the fonts via their servers.

This type of service will allow you to not worry about font-package types, as the service will often query the browser and deliver the appropriate type. Additionally, this means that you do not have to manage the fonts on your server space.

As with anything, a simple Google search with a query like “free web fonts” should return many lists and resources.

A few specific locations include:

Font Squirrel
- This site has many GNU/MIT fonts, as well as “paid” fonts.
- This site also links to other font sites.
Font Spring
- This is trying to be a for-profit type site. However, there are many fonts that the site will give up for free or release a few of the font varieties from a larger family for free.
Google Fonts
- Google runs everything. Of course, they also have a font service.