Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
lib
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Graphite Gem Version

Graphite allows you to import fonts into your stylesheet in a syntax similar to Google Fonts. Quick and simple. Graphite is completely Ruby-based, so if you're not using a Ruby compiler (like libsass), then the plugin will not work without a Ruby wrapper.

Requirements

  • Sass ~> 3.3.0 (have not tested earlier versions)

Installation

  1. gem install graphite-sass / bower install graphite-sass
  2. Add require "graphite" to your config.rb
  3. Import into your stylesheet with @import "graphite"

Documentation

Directory tree

Each font-family should have it's own folder inside of the top-level fonts directory. The font-family directory name should match the name specified in the actual font filename.

root/
├── fonts/
│   ├── helvetica-neue/
│   │   ├── helvetica-neue-400-italic.woff
│   │   ├── helvetica-neue-400-normal.woff
│   │   ├── helvetica-neue-700-italic.woff
│   │   ├── helvetica-neue-700-normal.woff
│   │   ├── ...
│   ├── another-font-family/
│   │   ├── ...
├── sass/
│   ├── style.scss
├── css/
│   ├── style.css
...

File naming convention

In order for Graphite to successfully import your fonts, please follow this convention for naming your font files:

name: <string>
weight: <100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900>
style: <normal | italic | oblique> (defaults to normal if blank)
extension: <woff | woff2 | ttf | eot | svg | otf>

name-weight-style.extension

Example, helvetica-neue-400-italic.woff, helvetica-neue-400-normal.ttf, helvetica-neue-100.svg

Usage

Font paths are relative to your config.rb or your $LOAD_PATH, so not necessarily the Sass file you're importing from. Graphite will automatically find the relative path between your CSS file and your font directory.

@import "fonts/lato?styles=200,700,200-italic,700-italic";
@import "fonts/helvetica-neue?styles=500";

Output

The output is similar to what Google Fonts does with their CSS. All fonts share the same font-family, and each fonts style and weight is assigned appropriately.

@font-face {
  font-family: "lato";
  font-weight: 200;
  font-style: normal;
  src: url("../fonts/lato/lato-200.ttf") format("truetype");
}
@font-face {
  font-family: "lato";
  font-weight: 700;
  font-style: normal;
  src: url("../fonts/lato/lato-700.ttf") format("truetype");
}
@font-face {
  font-family: "lato";
  font-weight: 200;
  font-style: italic;
  src: url("../fonts/lato/lato-200-italic.ttf") format("truetype");
}
@font-face {
  font-family: "lato";
  font-weight: 700;
  font-style: italic;
  src: url("../fonts/lato/lato-700-italic.ttf") format("truetype");
}
@font-face {
  font-family: "helvetica-neue";
  font-weight: 500;
  font-style: normal;
  src: url("../fonts/helvetica-neue/helvetica-neue-500.eot");
  src: url("../fonts/helvetica-neue/helvetica-neue-500.eot?#iefix") format("embedded-opentype"), url("../fonts/helvetica-neue/helvetica-neue-500.woff") format("woff"), url("../fonts/helvetica-neue/helvetica-neue-500.ttf") format("truetype"), url("../fonts/helvetica-neue/helvetica-neue-500.svg#helvetica-neue") format("svg");
}

Authors

Ezekiel Gabrielse

License

Graphite is available under the MIT license.

About

Graphite imports a folder of fonts and automagically outputs their font-face directives for you.

Resources

License

Releases

No releases published

Packages

No packages published