Web Fonts

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

Without Web Fonts, a users xomputer may not display the right font becuase their computer lacks the proper files. It is very improtant to declare and use web fonts, or a users computer will determine a replacement automatically.Sometimes those replacements are embarrassing.

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 advisible that you oby 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 wesites.

Font Fallback

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

Writing a Fallback

An exsample of a font fallback:

font-family: "Multi", "Tahoma", sans-serif

Google Web Fonts


Pseudo Classes

Pseudo classes deal with events in css. Typically, a pseudo clas ill wait for the user tp perform a certain action before it runs the css code.

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


In the example above, 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