Web Font Specimen Version 2.0 2010-04-06

Created by Tim Brown http://webfontspecimen.com http://nicewebtype.com

============================================================================

Thanks for downloading Web Font Specimen! Enclosed you will find example HTML, CSS, and image files, plus an empty folder in which to put your type.

One of the CSS files is Eric Meyer's reset.css; if you prefer a different stylesheet for resetting default browser styling, swap it out. Another of the CSS files is part of Nathan Smith's 960.gs, used for layout.

http://meyerweb.com/eric/tools/css/reset/ http://960.gs/

Feel free to edit and re-release wfs.css and the markup that uses it. They are licensed under a Creative Commons Attribution 3.0 License: http://creativecommons.org/licenses/by/3.0/us/

============================================================================

HOW TO USE:

1) Add a typeface to the css/type/ folder

Make sure the typeface you want to try is licensed for use with the CSS @font-face property. (Not sure? Check the typeface's EULA.) The typefaces featured at http://webfontspecimen.com are okay to use.

2) Edit index.html

In the HTML's embedded CSS, update the @font-face property and font stack. The value "Font name" is arbitrary, but must be the same in both spots (@font-face declaration and body declaration).

3. Label the HTML with your typeface's name

   • Line 6,
   • Line 31,

     Font name

   • Line 67, Font name

4. Preview index.html in a browser!

============================================================================

ADDITIONAL READING:

Web Font Specimen is designed to be quick and easy. Naturally, out of the box it does not work in Internet Explorer. But with a little extra effort and some advice from the pros, we can improve browser compatibility.

"How to use CSS @font-face" walks you through the concepts: http://nicewebtype.com/x/u

============================================================================

USING WITH TYPE DELIVERY SERVICES:

If you're using Web Font Specimen to try out typefaces from a type delivery service like Typekit, Typotheque, or Kernest, you'll need to remove the embedded CSS (the CSS in index.html) on lines 10-18 and add whatever code your service requires.

Just be sure the type delivered by your service is being applied to the "body" HTML element selector.

============================================================================

QUESTIONS?

Join Nice Web Type in the trenches. Let me know what you're working on via @nicewebtype reply on Twitter. I'll add you to a growing list of folks who are working for the betterment of typographic style and practice: http://twitter.com/nicewebtype/trenches

Thanks for checking out Web Font Specimen. I hope you enjoy it!

Tim