Skip to content
Graphite imports a folder of fonts and automagically outputs their font-face directives for you.
Ruby CSS
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


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

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.


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


  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"


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.

├── 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>


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


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";


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");


Ezekiel Gabrielse


Graphite is available under the MIT license.

You can’t perform that action at this time.