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 typerfaces from a server to display those typerfaces on their own websites.

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

Web Fonts vs @font-face

@font-face is a CSS feautre that allows you to use fonts that exist on you computer as a web font. IT is advisible that you only use @font-face when you are certaun your tpyeface 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 Fallsbacks are written in CSS as a way to prevent the user's computer from using system default font in case your web font doesn't lead properly.

Writing a Fallback

An exmaple of a font fallback;

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

Google Web Fonts


Pseudo Classes

Pseudo classes deal with 'event' 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 the example above, the psuedo class is :hover. Thid class waits for the user to hover their mouse cursor over an element before the CSS will run.

Translation Effects

Hover 1

Hover 2

Button Transition

Hover 3

Hover 4