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.
Install
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:
-
Add your typeface(s) to your specified
fonts
folder.- This is already specified as
fonts_dir
in yourconfig.rb
file. - Or link to fonts from google, typekit, or other services
- This is already specified as
-
For multiple specimens
- Duplicate
_type_specimen_1.scss
- Add
@import "_type_specimen_NEW_NUMBER.scss";
tospecimen.scss
- Duplicate
-
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 thespecimen.html
page)
-
Optional: add your
-
Make adjustments to
specimen.html
- For multiple specimens duplicate and rename for each font being sure to change the stylesheet link as needed.
-
Enjoy!