Skip to content


Subversion checkout URL

You can clone with
Download ZIP
An adaptation of Tim Brown's Web Font Specimen for Compass
Ruby CSS
Fetching latest commit...
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
lib updated for compass 0.10 and better gem handling
templates/project Updated Steps and made them consistent


Web Font Specimen - Compass Plugin

Web Font Specimen is a tool built by Tim Brown(Nice Web Type) to help web designers make type-setting decisions. It was ported to Compass by Eric Meyer.


sudo gem install webfontspecimen

Create A Project Using WFS:

compass create <project name> -r webfontspecimen -u webfontspecimen

Or Add WFS To An Existing Project:

Edit the project configuration file and add:

require 'webfontspecimen'    

Using Web Font Specimen:

  1. Add your typeface(s) to your specified fonts folder.

    • This is already specified as fonts_dir in your config.rb file.
    • Or link to fonts from google, typekit, or other services
  2. For multiple specimens

    • Duplicate _type_specimen_1.scss
    • Add @import "_type_specimen_NEW_NUMBER.scss"; to specimen.scss
  3. Add your font name and file path to $font-name and $font-file-name to _type_specimen_1.scss

    • Optional: add your $pretty-font-name (displays on the specimen.html page)
  4. Make adjustments to specimen.html

    • For multiple specimens duplicate and rename for each font being sure to change the stylesheet link as needed.
  5. Enjoy!

Something went wrong with that request. Please try again.