Web Fonts

Web Fonts are hosted by an external server or service such as Google Web Fonts, Adobe Typekit, or Monotype. These web fonts allow designers to pull typefaces from a server to display those typefaces on their own websites.

Without Web Fonts, a user's computer may not display the right fonts because their computer lacks proper files. It is very important to declare and use web fonts, or a user's computer will determine a replacement automatically. Sometimes those replacements are emarrassing.

Web Fonts vs @font-face

@font-face is a CSS feature that allows you to use fonts that exist on your computer as a web font. It is advisable that you only use @font-face when you are certain your typeface has the correct copyrights that allow it to be used as a web font.

Web Fonts are typefaces that have been optimized and cleared for use on websites.

Font Fallbacks

Font Fallbacks are written in CSS as a way to prevent the user's computer from using the system default font in case your web font doesn't load properly

Writing a Fallback

An example of a font fallback:

font-family: 'Muli', 'Tahoma', sans-serif;

Google Web Fonts


Pseudo Classes

Pseudo Classes deal with events in CSS. Typically, a Pseudo class will wait for the user to perform a certain action before it runs the CSS Code

Pseudo classes are written with selectors, like this...


In this example, the pseudo class is :hover. This class waits for the user to hover their mouse cursor over an element before the CSS will run.

Transition Effects

Hover 1

Hover 2

Button Transitions

Hover 3

Hover 4