fontcustom 1.3.5 → 1.3.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 7bb98673956f8d1fb1104898456348f491017f60
-  data.tar.gz: 68bd540c06bac96d0c52cc88a342052598137113
+  metadata.gz: 8a302bb68b5bb323306b41589116205fb6bbbf83
+  data.tar.gz: 805b09d919a952b81c81519222e790c33eb95f1c
 SHA512:
-  metadata.gz: d4dac02e94a65f6c1ff6b912245e8028b637b8f21541f9622377a71638443c802836828f54c90c2638d72e9063673eb9f04e40a5f3c3a7ccd8bb55f553579e15
-  data.tar.gz: da2ed0b92e8cb795ae2cd7d25bd72d865e6f23a02d591e223b5762bfd64ed35c0300c73571c5cbcf88faabb0566d08a99bed1610142c14b4b76c25fe4472b28c
+  metadata.gz: d8541d2a646e44a9d6540c166f181623ec30d822936de1779d1dcf14fb773fd714653f28a60eb4eeb3262793c9a5d4553004f548d795d6bd5e8cb6cc76dd87f1
+  data.tar.gz: b3f303802ac0e76d504449763efce560334306b4f45288bfe3be83ea3429de2704d6618aa08c68574828b5ca01f6e669c8b88e1d3c0c4661b6642fecd3930fe1

data/.travis.yml

@@ -6,7 +6,7 @@ before_install:
   - unzip woff-code-latest.zip -d sfnt2woff && cd sfnt2woff && make && sudo mv sfnt2woff /usr/local/bin/
   - bundle
 rvm:
-  - 2.1.0
+  - 2.1.1
   - 2.0.0
   - 1.9.3
   - 1.9.2

data/README.md

@@ -6,7 +6,9 @@
 
 **Icon fonts from the command line.**
 
-Generate cross-browser icon fonts and supporting files (@font-face CSS, etc.) from a collection of SVGs.
+Generate cross-browser icon fonts and supporting files (@font-face CSS, etc.)
+from a collection of SVGs 
+([example](https://rawgit.com/FontCustom/fontcustom/master/spec/fixtures/example/example-preview.html)).
 
 [Changelog](https://github.com/FontCustom/fontcustom/blob/master/CHANGELOG.md)<br>
 [Bugs/Support](https://github.com/FontCustom/fontcustom/issues)<br>
@@ -32,90 +34,76 @@ gem install fontcustom
 ### Quick Start
 
 ```sh
-fontcustom compile path/to/vectors  # Compiles icons into `fontcustom/`
-fontcustom watch path/to/vectors    # Compiles when vectors are changed/added/removed
-fontcustom compile                  # Uses configuration file at `fontcustom.yml`
-                                    # or `config/fontcustom.yml`
-fontcustom config                   # Generate a blank a configuration file
-fontcustom help                     # See all options
+fontcustom compile my/vectors  # Compiles icons into `fontcustom/`
+fontcustom watch my/vectors    # Compiles when vectors are changed/added/removed
+fontcustom compile             # Uses options from `./fontcustom.yml` or `config/fontcustom.yml`
+fontcustom config              # Generate a blank a config file
+fontcustom help                # See all options
 ```
 
 ### Configuration
 
-To preserve options between compiles, create a configuration file with
-`fontcustom config`. This should live in the directory where you run
-all `fontcustom` commands. Each of the following has its own command 
-line flag (`--css-selector`, etc.). Defaults values are shown.
-
-**Basics**
-
-```yml
-project_root: (pwd)                   # Context for all relative paths
-input: (project_root)                 # Where vectors and templates are located
-output: (project_root)/(font name)    # Where generated files will be saved
-config: (pwd)/fontcustom.yml          # Optional path to a configuration file
-debug: false                          # Output raw messages from fontforge
-quiet: false                          # Silence all messages except errors
-
-# For more control over file locations, set
-# input and output as hashes instead of strings
-input:
-  vectors: path/to/vectors            # required
-  templates: path/to/templates
-
-output:
-  fonts: app/assets/fonts             # required
-  css: app/assets/stylesheets
-  preview: app/views/styleguide
-```
+To manage settings between compiles, run `fontcustom config` to generate a
+config file. Inside, you'll find a list of [**all possible options**](https://github.com/FontCustom/fontcustom/blob/master/lib/fontcustom/templates/fontcustom.yml).
+Each option is also available as a dash-case command line flag (e.g.
+`--css-selector`) that overrides the config file.
 
-**Fonts**
-
-```yml
-font_name: fontcustom                 # Also sets the default output directory and
-                                      # the name of generated stock templates
-font_design_size: 16                  # The size of the original glyphs
-font_em: 512                          # Scale font up to this size
-font_ascent: 448                      # Location of font ascent
-font_descent: 64                      # Location of font descent
-no_hash: false                        # Don't add asset-busting hashes to font files
-autowidth: false                      # Automatically size glyphs based on the width of
-                                      # their individual vectors
-```
+### SVG Guidelines
 
-**Templates**
+* All colors will be rendered identically. Watch out for white fills!
+* Use only solid colors. SVGs with transparency will be skipped.
+* For greater precision in curved icons, use fills instead strokes and [try
+  these solutions](https://github.com/FontCustom/fontcustom/issues/85).
+* Activating `autowidth` trims horizontal white space from each glyph. This
+  can be much easier than centering dozens of SVGs by hand.
 
-```yml
-templates: [ css, preview ]           # List of templates to generate alongside fonts
-                                      # Possible values: preview, css, scss, scss-rails
-css_selector: .icon-{{glyph}}         # CSS selector format (`{{glyph}}` is replaced)
-preprocessor_path: ""                 # Font path used in CSS proprocessor templates
-                                      # Set to "" or false to use the bare font name
+### Advanced
 
-# Custom templates should live in the `input` 
-# or `input[:templates]` directory and be added
-# to `templates` as their basename:
-templates: [ preview, VectorIcons.less ]
-```
+**For use with Compass and/or Rails**
 
-Custom templates have access to `@options`, `@manifest`, and the following ERB helpers:
+Set `templates` to include `scss-rails` to generate a SCSS partial with the
+compatible font-url() helper. You'll most likely also need to set
+`preprocessor_path` as the relative path from your compiled CSS to your output
+directory.
 
-* `font_name` 
-* `font_face`: FontSpring's [Bulletproof @font-face syntax](http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax)
-  - Font paths can be modified by passing a hash. `font_face(url: "font-url", path: @font_path_alt)`
-  - The `preview`, `scss`, and `scss-rails` templates use modified font paths. Compass users should use the `scss-rails` template.
-* `glyph_selectors`: comma-separated list of all selectors
-* `glyphs`: all selectors and their codepoint assignments (`.icon-example:before { content: "\f103"; }`)
+**Save CSS and fonts to different locations**
 
-### SVG Guidelines
+You can save generated fonts, CSS, and other files to different locations by
+using `fontcustom.yml`. Font Custom can also read input vectors and templates
+from different places. 
+
+Just edit the `input` and `output` YAML hashes and their corresponding keys.
+
+**Tweak font settings**
+
+By default, Font Custom assumes a square viewBox, 512 by 512, and 16 pica
+points. Change `font_design_size`, `font_em`, `font_ascent`, `font_descent`,
+and `autowidth` to suit your own needs.
+
+**Generate LESS, Stylus, and other text files**
+
+Custom templates give you the flexibility to generate just about anything you
+want with Font Custom's output data.
+
+Any non-SVG file in your input directory (or input:templates directory if you
+set it in `fontcustom.yml`) will be available as a custom template to copy into
+the output directory after compilation. You just need to specify the file name
+under the `templates` hash.
+
+Any embedded ruby in the templates will be processed, along with the following
+helpers:
+
+* `font_name`
+* `font_face`: [FontSpring's Bulletproof @Font-Face Syntax](http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax)
+* `glyph_selectors`: comma-separated list of all icon CSS selectors
+* `glyphs`: all selectors and their codepoint assignments (`.icon-example:before { content: "\f103"; }`)
+* `@options`: a hash of options used during compilation
+* `@manifest`: a hash of options, generated file paths, code points, and just about everything else Font Custom knows.
+* `@font_path`: the path from CSS to font files (without an extension)
+* `@font_path_alt`: if `preprocessor_path` was set, this is the modified path
 
-* All colors will be rendered identically — including white fills.
-* Make transparent colors solid. SVGs with transparency will be skipped.
-* For greater precision, prefer fills to strokes (especially if your icon includes curves).
-* Keep your icon within a square `viewBox`. Font Custom scales each SVG to fit
-  a 512x512 canvas with a baseline at 448.
-* Setting `autowidth` to true trims horizontal white space from each glyph. This can be much easier
-  than centering dozens of SVGs by hand.
+`font_face` accepts a hash that modifies the CSS url() function and the path of
+the font files (`font_face(url: "font-url", path: @font_path_alt)`).
 
 ---
 

data/fontcustom.gemspec

@@ -24,5 +24,5 @@ Gem::Specification.new do |gem|
 
   gem.add_development_dependency "rake"
   gem.add_development_dependency "bundler"
-  gem.add_development_dependency "rspec"
+  gem.add_development_dependency "rspec", "~>3.1.0"
 end

data/lib/fontcustom/cli.rb

@@ -22,41 +22,44 @@ module Fontcustom
       :enum => %w|preview css scss scss-rails|,
       :default => EXAMPLE_OPTIONS[:templates]
 
-    class_option :font_name, :aliases => "-f", :type => :string,
+    class_option :font_name, :aliases => %w|name -n|, :type => :string,
       :desc => "The font's name. Also determines the file names of generated templates.",
       :default => DEFAULT_OPTIONS[:font_name]
     
-    class_option :font_design_size, :aliases => '-x', :type => :numeric,
-      :desc => "Size (in pica points) for which this font was designed.",
+    class_option :font_design_size, :aliases => %s|size -s|, :type => :numeric,
+      :desc => "Size (in pica points) for which this font is designed.",
       :default => DEFAULT_OPTIONS[:font_design_size]
 
-    class_option :font_em, :aliases => '-m', :type => :numeric,
-      :desc => "The em size of the font. Setting this will scale the entire font to the given size.",
+    class_option :font_em, :aliases => %w|em -e|, :type => :numeric,
+      :desc => "The em size. Setting this will scale the entire font to the given size.",
       :default => DEFAULT_OPTIONS[:font_em]
 
-    class_option :font_ascent, :aliases => '-a', :type => :numeric,
-      :desc => "The font's ascent.",
+    class_option :font_ascent, :aliases => %w|ascent -a|, :type => :numeric,
+      :desc => "The font's ascent. Used to calculate the baseline.",
       :default => DEFAULT_OPTIONS[:font_ascent]
 
-    class_option :font_descent, :aliases => '-z', :type => :numeric,
-      :desc => "The font's descent.",
+    class_option :font_descent, :aliases => %w|descent -d|, :type => :numeric,
+      :desc => "The font's descent. Used to calculate the baseline.",
       :default => DEFAULT_OPTIONS[:font_descent]
 
-    class_option :css_selector, :aliases => "-s", :type => :string,
-      :desc => "Format of generated CSS selector. \"{{glyph}}\" is substituted for the glyph name.",
+    class_option :css_selector, :aliases => %w|selector -S|, :type => :string,
+      :desc => "Format of CSS selectors. \"{{glyph}}\" is substituted for the glyph name.",
       :default => DEFAULT_OPTIONS[:css_selector]
 
-    class_option :preprocessor_path, :aliases => "-p", :type => :string,
-      :desc => "Optional font path for CSS proprocessor templates."
+    class_option :preprocessor_path, :aliases => %w|prepath -p|, :type => :string,
+      :desc => "For Rails and Compass templates, set this as the relative path from your compiled CSS to your font output directory."
 
-    class_option :autowidth, :aliases => "-a", :type => :boolean,
-      :desc => "Auto-size glyphs to their individual vector widths."
+    class_option :autowidth, :aliases => "-A", :type => :boolean,
+      :desc => "Horizontally fit glyphs to their individual vector widths."
 
-    class_option :no_hash, :aliases => "-n", :type => :boolean,
+    class_option :no_hash, :aliases => "-h", :type => :boolean,
       :desc => "Generate fonts without asset-busting hashes."
 
-    class_option :debug, :aliases => "-d", :type => :boolean,
-      :desc => "Display debugging messages."
+    class_option :base64, :aliases => "-b", :type => :boolean,
+      :desc => "Encode WOFF fonts into the generated CSS."
+
+    class_option :debug, :aliases => "-D", :type => :boolean,
+      :desc => "Display (possibly useful) debugging messages."
 
     class_option :force, :aliases => "-F", :type => :boolean,
       :desc => "Forces compilation, even if inputs have not changed."

data/lib/fontcustom/generator/template.rb

@@ -132,17 +132,40 @@ module Fontcustom
           url = style[:url]
           path = style[:path]
         end
-%Q|@font-face {
+
+        # Bulletproof @Font-Face <http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax>
+        # With and without Base64
+        if @options[:base64]
+          string = %Q|@font-face {
+  font-family: "#{font_name}";
+  src: #{url}("#{path}.eot?") format("embedded-opentype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "#{font_name}";
+  src: url("data:application/x-font-woff;charset=utf-8;base64,#{woff_base64}") format("woff"),
+       #{url}("#{path}.ttf") format("truetype"),
+       #{url}("#{path}.svg##{font_name}") format("svg");
+  font-weight: normal;
+  font-style: normal;
+}|
+        else
+        string = %Q|@font-face {
   font-family: "#{font_name}";
   src: #{url}("#{path}.eot");
   src: #{url}("#{path}.eot?#iefix") format("embedded-opentype"),
-       url("#{woff_data_uri}"),
        #{url}("#{path}.woff") format("woff"),
        #{url}("#{path}.ttf") format("truetype"),
        #{url}("#{path}.svg##{font_name}") format("svg");
   font-weight: normal;
   font-style: normal;
-}
+}|
+        end
+
+        # For Windows/Chrome <http://stackoverflow.com/a/19247378/1202445>
+        string << %Q|
 
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   @font-face {
@@ -150,14 +173,11 @@ module Fontcustom
     src: #{url}("#{path}.svg##{font_name}") format("svg");
   }
 }|
-      end
-
-      def woff_data_uri
-        "data:application/x-font-woff;charset=utf-8;base64,#{woff_base64}"
+        string
       end
 
       def woff_base64
-        woff_path = File.join(@options[:output][:fonts], "#{@font_path_alt}.woff")
+        woff_path = File.join(@options[:output][:fonts], "#{@font_path}.woff")
         Base64.encode64(File.binread(File.join(woff_path))).gsub("\n", "")
       end
 

data/lib/fontcustom/templates/fontcustom.yml

@@ -1,51 +1,96 @@
-# --------------------------------------------------------------------------- #
+# =============================================================================
+# Font Custom Configuration
+#   This file should live in the directory where you run `fontcustom compile`.
+#   For more info, visit <https://github.com/FontCustom/fontcustom>.
+# =============================================================================
+
+
+# -----------------------------------------------------------------------------
 # Project Info
-#   Defaults shown. Learn more about these options by running
-#   `fontcustom help` or visiting <http://fontcustom.com>.
-# --------------------------------------------------------------------------- #
+# -----------------------------------------------------------------------------
+
+# The font's name. Also determines the file names of generated templates.
+#font_name: icons
+
+# Format of CSS selectors. {{glyph}} is substituted for the glyph name.
+#css_selector: .i-{{glyph}}
 
-font_name: fontcustom
-font_design_size: 16
-font_em: 512
-font_ascent: 448
-font_descent: 64
-css_selector: .icon-{{glyph}}
-preprocessor_path: ""
-autowidth: false
-no_hash: false
-force: false
-debug: false
-quiet: false
+# Generate fonts without asset-busting hashes.
+#no_hash: true
 
+# Encode WOFF fonts into the generated CSS.
+#base64: true
 
-# --------------------------------------------------------------------------- #
-# Input Paths
-# --------------------------------------------------------------------------- #
+# Forces compilation, even if inputs have not changed
+#force: true
 
-input:
-  vectors: app/assets/fonts/fontcustom/vectors         # required
-  templates: app/assets/fonts/fontcustom/templates
+# Display (possibly useful) debugging messages.
+#debug: true
 
+# Hide status messages.
+#quiet: true
 
-# --------------------------------------------------------------------------- #
-# Output Paths
-# --------------------------------------------------------------------------- #
 
-output:
-  fonts: app/assets/fonts                              # required
-  css: app/assets/stylesheets
-  preview: app/views/styleguide
-  #my-custom-template.yml: path/to/template/output
+# -----------------------------------------------------------------------------
+# Input / Output Locations
+#   You can save generated fonts, CSS, and other files to different locations
+#   here. Font Custom can also read input vectors and templates from different
+#   places.
+#
+#   NOTE:
+#   - Be sure to preserve the whitespace in these YAML hashes.
+#   - INPUT[:vectors] and OUTPUT[:fonts] are required. Everything else is
+#     optional.
+#   - Specify output locations for custom templates by including their file
+#     names as the key.
+# -----------------------------------------------------------------------------
 
+#input:
+#  vectors: my/vectors
+#  templates: my/templates
 
-# --------------------------------------------------------------------------- #
+#output:
+#  fonts: app/assets/fonts
+#  css: app/assets/stylesheets
+#  preview: app/views/styleguide
+#  my-custom-template.yml: path/to/template/output
+
+
+# -----------------------------------------------------------------------------
 # Templates
+#   A YAML array of templates and files to generate alongside fonts. Custom
+#   templates should be saved in the INPUT[:templates] directory and referenced
+#   by their base file name.
+#
+#   For Rails and Compass templates, set `preprocessor_path` as the relative
+#   path from OUTPUT[:css] to OUTPUT[:fonts]. By default, these are the same
+#   directory.
+#
 #   Included in Font Custom: preview, css, scss, scss-rails
-#   Custom templates should be saved in the INPUT[:templates] directory and
-#   referenced by their baserame.
-# --------------------------------------------------------------------------- #
-
-templates:
- - scss
- - preview
- #- my-custom-template.yml
+#   Default: css, preview
+# -----------------------------------------------------------------------------
+
+#templates:
+#- scss-rails
+#- preview
+#- my-custom-template.yml
+
+#preprocessor_path: ../fonts/
+
+
+# -----------------------------------------------------------------------------
+# Font Settings (defaults shown)
+# -----------------------------------------------------------------------------
+
+# Size (in pica points) for which your font is designed.
+#font_design_size: 16
+
+# The em size. Setting this will scale the entire font to the given size.
+#font_em: 512
+
+# The font's descent and descent. Used to calculate the baseline.
+#font_ascent: 448
+#font_descent: 64
+
+# Horizontally fit glyphs to their individual vector widths.
+#autowidth: true

data/lib/fontcustom/version.rb

@@ -1,3 +1,3 @@
 module Fontcustom
-  VERSION = "1.3.5"
+  VERSION = "1.3.6"
 end

data/spec/fixtures/example/_example-rails.scss

@@ -0,0 +1,50 @@
+//
+// Icon Font: example
+//
+
+@font-face {
+  font-family: "example";
+  src: font-url("../foo/bar/example.eot?") format("embedded-opentype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "example";
+  src: url("data:application/x-font-woff;charset=utf-8;base64,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") format("woff"),
+       font-url("../foo/bar/example.ttf") format("truetype"),
+       font-url("../foo/bar/example.svg#example") format("svg");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  @font-face {
+    font-family: "example";
+    src: font-url("../foo/bar/example.svg#example") format("svg");
+  }
+}
+
+[data-icon]:before { content: attr(data-icon); }
+
+[data-icon]:before,
+.icon-C:before,
+.icon-D:before,
+.icon-a_R3ally-eXotic-f1Le-Name:before {
+  display: inline-block;
+  font-family: "example";
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  line-height: 1;
+  text-decoration: inherit;
+  text-rendering: optimizeLegibility;
+  text-transform: none;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-smoothing: antialiased;
+}
+
+.icon-C:before { content: "\f100"; }
+.icon-D:before { content: "\f101"; }
+.icon-a_R3ally-eXotic-f1Le-Name:before { content: "\f102"; }

data/spec/fixtures/example/example-preview.html

@@ -0,0 +1,253 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>example glyphs preview</title>
+
+    <style>
+      /* Page Styles */
+
+      * {
+        -moz-box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+
+      body {
+        background: #fff;
+        color: #444;
+        font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
+      }
+
+      a,
+      a:visited {
+        color: #888;
+        text-decoration: underline;
+      }
+      a:hover,
+      a:focus { color: #000; }
+
+      header {
+        border-bottom: 2px solid #ddd;
+        margin-bottom: 20px;
+        overflow: hidden;
+        padding: 20px 0;
+      }
+
+      header h1 {
+        color: #888;
+        float: left;
+        font-size: 36px;
+        font-weight: 300;
+      }
+
+      header a {
+        float: right;
+        font-size: 14px;
+      }
+
+      .container {
+        margin: 0 auto;
+        max-width: 1200px;
+        min-width: 960px;
+        padding: 0 40px;
+        width: 90%;
+      }
+
+      .glyph {
+        border-bottom: 1px dotted #ccc;
+        padding: 10px 0 20px;
+        margin-bottom: 20px;
+      }
+
+      .preview-glyphs { vertical-align: bottom; }
+
+      .preview-scale {
+        color: #888;
+        font-size: 12px;
+        margin-top: 5px;
+      }
+
+      .step {
+        display: inline-block;
+        line-height: 1;
+        position: relative;
+        width: 10%;
+      }
+
+      .step .letters,
+      .step i {
+        -webkit-transition: opacity .3s;
+        -moz-transition: opacity .3s;
+        -ms-transition: opacity .3s;
+        -o-transition: opacity .3s;
+        transition: opacity .3s;
+      }
+
+      .step:hover .letters { opacity: 1; }
+      .step:hover i { opacity: .3; }
+
+      .letters {
+        opacity: .3;
+        position: absolute;
+      }
+
+      .characters-off .letters { display: none; }
+      .characters-off .step:hover i { opacity: 1; }
+
+      
+      .size-12 { font-size: 12px; }
+      
+      .size-14 { font-size: 14px; }
+      
+      .size-16 { font-size: 16px; }
+      
+      .size-18 { font-size: 18px; }
+      
+      .size-21 { font-size: 21px; }
+      
+      .size-24 { font-size: 24px; }
+      
+      .size-36 { font-size: 36px; }
+      
+      .size-48 { font-size: 48px; }
+      
+      .size-60 { font-size: 60px; }
+      
+      .size-72 { font-size: 72px; }
+      
+
+      .usage { margin-top: 10px; }
+
+      .usage input {
+        font-family: monospace;
+        margin-right: 3px;
+        padding: 2px 5px;
+        text-align: center;
+      }
+
+      .usage .point { width: 150px; }
+
+      .usage .class { width: 250px; }
+
+      footer {
+        color: #888;
+        font-size: 12px;
+        padding: 20px 0;
+      }
+
+      /* Icon Font: example */
+
+      @font-face {
+  font-family: "example";
+  src: url("./example.eot?") format("embedded-opentype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "example";
+  src: url("data:application/x-font-woff;charset=utf-8;base64,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") format("woff"),
+       url("./example.ttf") format("truetype"),
+       url("./example.svg#example") format("svg");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  @font-face {
+    font-family: "example";
+    src: url("./example.svg#example") format("svg");
+  }
+}
+
+      [data-icon]:before { content: attr(data-icon); }
+
+      [data-icon]:before,
+      .icon-C:before,
+.icon-D:before,
+.icon-a_R3ally-eXotic-f1Le-Name:before {
+        display: inline-block;
+  font-family: "example";
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  line-height: 1;
+  text-decoration: inherit;
+  text-rendering: optimizeLegibility;
+  text-transform: none;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-smoothing: antialiased;
+      }
+
+      .icon-C:before { content: "\f100"; }
+.icon-D:before { content: "\f101"; }
+.icon-a_R3ally-eXotic-f1Le-Name:before { content: "\f102"; }
+    </style>
+
+    <!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
+
+    <script>
+      function toggleCharacters() {
+        var body = document.getElementsByTagName('body')[0];
+        body.className = body.className === 'characters-off' ? '' : 'characters-off';
+      }
+    </script>
+  </head>
+
+  <body class="characters-off">
+    <div id="page" class="container">
+      <header>
+        <h1>example contains 3 glyphs:</h1>
+        <a onclick="toggleCharacters(); return false;" href="#">Toggle Preview Characters</a>
+      </header>
+
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="icon-C" class="icon-C"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-C" class="icon-C"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-C" class="icon-C"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-C" class="icon-C"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-C" class="icon-C"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-C" class="icon-C"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-C" class="icon-C"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-C" class="icon-C"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-C" class="icon-C"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-C" class="icon-C"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-C" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf100;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="icon-D" class="icon-D"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-D" class="icon-D"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-D" class="icon-D"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-D" class="icon-D"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-D" class="icon-D"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-D" class="icon-D"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-D" class="icon-D"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-D" class="icon-D"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-D" class="icon-D"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-D" class="icon-D"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-D" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf101;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="icon-a_R3ally-eXotic-f1Le-Name" class="icon-a_R3ally-eXotic-f1Le-Name"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-a_R3ally-eXotic-f1Le-Name" class="icon-a_R3ally-eXotic-f1Le-Name"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-a_R3ally-eXotic-f1Le-Name" class="icon-a_R3ally-eXotic-f1Le-Name"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-a_R3ally-eXotic-f1Le-Name" class="icon-a_R3ally-eXotic-f1Le-Name"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-a_R3ally-eXotic-f1Le-Name" class="icon-a_R3ally-eXotic-f1Le-Name"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-a_R3ally-eXotic-f1Le-Name" class="icon-a_R3ally-eXotic-f1Le-Name"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-a_R3ally-eXotic-f1Le-Name" class="icon-a_R3ally-eXotic-f1Le-Name"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-a_R3ally-eXotic-f1Le-Name" class="icon-a_R3ally-eXotic-f1Le-Name"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-a_R3ally-eXotic-f1Le-Name" class="icon-a_R3ally-eXotic-f1Le-Name"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-a_R3ally-eXotic-f1Le-Name" class="icon-a_R3ally-eXotic-f1Le-Name"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-a_R3ally-eXotic-f1Le-Name" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf102;" />
+        </div>
+      </div>
+      
+
+      <footer>
+        Made with love using <a href="http://fontcustom.com">Font Custom</a>.
+      </footer>
+    </div>
+  </body>
+</html>

data/spec/fixtures/example/example.css

@@ -0,0 +1,50 @@
+/*
+  Icon Font: example
+*/
+
+@font-face {
+  font-family: "example";
+  src: url("./example.eot?") format("embedded-opentype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "example";
+  src: url("data:application/x-font-woff;charset=utf-8;base64,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") format("woff"),
+       url("./example.ttf") format("truetype"),
+       url("./example.svg#example") format("svg");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  @font-face {
+    font-family: "example";
+    src: url("./example.svg#example") format("svg");
+  }
+}
+
+[data-icon]:before { content: attr(data-icon); }
+
+[data-icon]:before,
+.icon-C:before,
+.icon-D:before,
+.icon-a_R3ally-eXotic-f1Le-Name:before {
+  display: inline-block;
+  font-family: "example";
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  line-height: 1;
+  text-decoration: inherit;
+  text-rendering: optimizeLegibility;
+  text-transform: none;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-smoothing: antialiased;
+}
+
+.icon-C:before { content: "\f100"; }
+.icon-D:before { content: "\f101"; }
+.icon-a_R3ally-eXotic-f1Le-Name:before { content: "\f102"; }

data/spec/fixtures/example/example.svg

@@ -0,0 +1,75 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!--
+2014-11-25: Created with FontForge (http://fontforge.org)
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>
+Created by FontForge 20141021 at Tue Nov 25 18:43:34 2014
+ By Kai
+Copyright (c) 2014, Kai
+</metadata>
+<defs>
+<font id="example" horiz-adv-x="512" >
+  <font-face 
+    font-family="example"
+    font-weight="400"
+    font-stretch="normal"
+    units-per-em="512"
+    panose-1="2 0 5 9 0 0 0 0 0 0"
+    ascent="448"
+    descent="-64"
+    bbox="17.9187 -10.3193 488.962 442.989"
+    underline-thickness="25.6"
+    underline-position="-51.2"
+    unicode-range="U+F100-F102"
+  />
+    <missing-glyph />
+    <glyph glyph-name="uniF100" unicode="&#xf100;" 
+d="M237.539 129.747c-4.83398 0 -8.75391 3.91992 -8.75391 8.75391c0 7.89844 -6.4248 14.3184 -14.3184 14.3184s-14.3174 -6.41992 -14.3174 -14.3184c0 -4.83398 -3.91992 -8.75391 -8.75488 -8.75391c-4.83398 0 -8.75391 3.91992 -8.75391 8.75391
+c0 17.5527 14.2793 31.8311 31.8262 31.8311s31.8262 -14.2783 31.8262 -31.8311c0 -4.83887 -3.91992 -8.75391 -8.75391 -8.75391zM325.231 129.747c-4.83496 0 -8.75488 3.91992 -8.75488 8.75391c0 7.89844 -6.42383 14.3184 -14.3174 14.3184
+c-7.89844 0 -14.3184 -6.41992 -14.3184 -14.3184c0 -4.83398 -3.9248 -8.75391 -8.75879 -8.75391c-4.8291 0 -8.75391 3.91992 -8.75391 8.75391c0 17.5527 14.2793 31.8311 31.8311 31.8311c17.5469 0 31.8262 -14.2783 31.8262 -31.8311
+c-0.00488281 -4.83887 -3.91992 -8.75391 -8.75391 -8.75391zM255.193 -10.3193c-90.4941 0 -120.496 73.627 -128.569 101.28c-7.91797 1.52246 -14.8965 5.4668 -20.5625 11.6729c-27.8916 30.6006 -14.3955 112.126 -12.7666 121.322
+c0.875977 4.94141 4.49414 8.9541 9.31836 10.3301c4.80957 1.37109 10.0137 -0.102539 13.3691 -3.8418l39.3945 -43.7715c4.85352 -5.3877 4.41504 -13.6855 -0.972656 -18.5391c-5.38867 -4.8584 -13.6914 -4.41602 -18.54 0.972656l-20.1533 22.3916
+c-2.14062 -27.8428 -0.871094 -59.5088 9.76562 -71.1709c2.75195 -3.01562 5.89453 -4.12012 10.4463 -3.75977c6.70215 0.646484 12.8828 -4.15332 14.0312 -10.8799c0.641602 -3.62793 16.7783 -89.7393 105.239 -89.7393c88.46 0 104.598 86.1113 105.244 89.7734
+c1.17676 6.69238 7.29492 11.4482 14.0312 10.8457c4.79004 -0.370117 8.04395 0.753906 10.8447 3.85645c10.2227 11.293 11.1377 41.3486 9.25 66.5605l-15.9131 -17.834c-4.8291 -5.39844 -13.126 -5.87988 -18.5391 -1.05078
+c-5.4082 4.83008 -5.88477 13.1318 -1.05469 18.54l35.1621 39.3984c3.3457 3.72949 8.50586 5.25684 13.335 3.89551c4.82031 -1.34277 8.45801 -5.3252 9.37695 -10.252c1.62402 -8.78809 15.1104 -86.749 -12.1387 -116.873
+c-5.75391 -6.35645 -12.8984 -10.3691 -21.0342 -11.8809c-8.09277 -27.6924 -38.1152 -101.247 -128.564 -101.247zM255.174 42.2061c-27.4053 0 -53.5947 10.3828 -71.8428 28.4893c-3.42871 3.4043 -3.45801 8.94434 -0.0478516 12.3779
+c3.39453 3.43848 8.94336 3.45801 12.377 0.0527344c14.999 -14.8818 36.6943 -23.4072 59.5137 -23.4072s44.5098 8.53027 59.5088 23.4072c3.43359 3.40039 8.98242 3.38086 12.3818 -0.0527344c3.4043 -3.43359 3.37988 -8.97363 -0.0537109 -12.3779
+c-18.2471 -18.1064 -44.4316 -28.4893 -71.8369 -28.4893zM255.052 427.388c24.1328 0 43.7715 -19.6387 43.7715 -43.7705s-19.6387 -43.7705 -43.7715 -43.7705c-24.1367 0 -43.7705 19.6387 -43.7705 43.7705s19.6338 43.7705 43.7705 43.7705zM255.052 366.109
+c9.6543 0 17.5088 7.84863 17.5088 17.5078s-7.84961 17.5078 -17.5088 17.5078c-9.6582 0 -17.5127 -7.84863 -17.5127 -17.5078s7.85938 -17.5078 17.5127 -17.5078zM259.424 357.354h-21.8848l-96.291 -113.804s91.9189 21.8857 113.804 21.8857zM250.675 357.354
+h21.8857l96.2949 -113.799s-91.9131 21.8857 -113.799 21.8857zM362.042 171.047c-113.195 68.7256 -204.793 3.46289 -208.635 0.647461l-15.5879 21.1357c1.08008 0.802734 109.267 78.7295 237.851 0.671875zM114.981 208.529
+c-5.50098 0 -10.6221 3.48242 -12.4561 8.9873c-2.29492 6.87695 1.42578 14.3135 8.30664 16.6045l35.8438 11.9541l19.4971 23.3975c3.08398 3.69629 7.94727 5.41309 12.665 4.46484l38.6543 -7.72754l30.5957 19.1172c4.25977 2.66113 9.6582 2.66113 13.9189 0
+l30.5957 -19.1172l38.6592 7.72754c4.70801 0.948242 9.58105 -0.768555 12.6592 -4.46484l19.3564 -23.2275l39.9873 -11.998c6.9502 -2.08594 10.8838 -9.40527 8.80273 -16.3506c-2.08203 -6.94531 -9.37695 -10.9082 -16.3457 -8.80273l-43.7705 13.1309
+c-2.4707 0.739258 -4.66406 2.18848 -6.31836 4.16309l-16.8857 20.2607l-36.1104 -7.2168c-3.27344 -0.651367 -6.69238 -0.0341797 -9.53223 1.74121l-28.0576 17.5273l-28.0615 -17.5273c-2.83984 -1.77051 -6.25879 -2.39258 -9.53223 -1.74121l-36.1113 7.2168
+l-16.8857 -20.2607c-1.56543 -1.87695 -3.61816 -3.27734 -5.9375 -4.0459l-39.3984 -13.1318c-1.3623 -0.461914 -2.7627 -0.680664 -4.13867 -0.680664zM281.305 90.3535c-1.90625 0 -3.81738 0.612305 -5.42773 1.8916
+c-1.74609 1.35254 -17.1484 12.5918 -32.8711 0.0292969c-3.76465 -3.02051 -9.28027 -2.41211 -12.2998 1.36719c-3.02051 3.77344 -2.40723 9.28418 1.36621 12.2988c21.6328 17.3145 45.2441 7.57715 54.7041 0c3.77832 -3.01465 4.3916 -8.52539 1.36621 -12.2988
+c-1.72168 -2.16016 -4.26953 -3.28809 -6.83789 -3.28809z" />
+    <glyph glyph-name="uniF102" unicode="&#xf102;" 
+d="M392.324 192.766l64.0146 -200.619h-397.195l41.6094 94.125v190.088l88.9336 72.4111l-60.6377 23.5332s26.2734 57.9336 66.7002 70.6055c6.46973 2.02734 10.1797 -35.1309 20.1074 -35.9619c9.38086 -0.776367 19.4023 37.9482 30.3867 35.4521
+c50.0283 -11.3584 114.625 -39.3115 114.625 -39.3115l-1.86426 -23.5342l-86.4424 -16.292l88.3105 -55.2832zM242.392 74.7188c52.5439 0 95.1455 42.5986 95.1455 95.1455c0 52.543 -42.5977 95.1416 -95.1455 95.1416c-52.5469 0 -95.1455 -42.5986 -95.1455 -95.1416
+c0 -52.5469 42.5986 -95.1455 95.1455 -95.1455zM240.356 183.593v0v24.9326c-5.4541 -2.23828 -9.6748 -6.3916 -9.6748 -13.9043c0 -5.11426 3.86914 -8.31055 9.6748 -11.0283zM248.622 156.583v0v-24.4541c5.80078 2.23926 10.1934 6.22949 10.1934 12.1436
+c0 5.91797 -4.2207 9.59277 -10.1934 12.3105zM240.356 239.215v-0.0136719h8.26562v-11.5029c10.3691 0 19.8633 -1.27734 28.6572 -3.99902l-2.28906 -18.3789c-7.7373 3.03418 -16.3506 4.79492 -24.9648 4.79492c-0.527344 0 -0.875 0 -1.40332 -0.158203v-29.5693
+c15.4619 -5.59375 35.8623 -11.3447 35.8623 -34.3594c0 -20.9463 -15.6475 -30.8516 -35.8623 -33.0908v-13.1006h-8.26562v12.627c-0.705078 -0.162109 -1.40918 -0.162109 -1.9375 -0.162109c-13.3623 0 -19.335 1.60254 -31.4697 4.31543l2.28906 20.1387
+c8.4375 -4.14844 18.1074 -6.86621 27.7773 -6.86621c1.05566 0 2.1084 0 3.34082 0.31543v29.8906c-15.8232 5.59766 -35.3389 11.3486 -35.3389 33.5645c0 21.8945 16.5273 31.6504 35.3389 33.7266v11.8281z" />
+    <glyph glyph-name="uniF101" unicode="&#xf101;" 
+d="M91.8887 131.287c6.78418 5.73438 17.1367 6.44629 23.5771 0.445312c6.68164 -6.22559 6.68164 -16.3584 0 -22.584l-25.0264 -23.3271c-0.890625 -0.833984 -2.33984 -0.833984 -3.22559 0l-25.0312 23.3271c-6.68164 6.23047 -6.68164 16.3525 0 22.584
+c6.43555 6.00098 16.793 5.28906 23.5723 -0.445312l3.06641 -2.60059zM185.058 105.923c6.7832 5.73438 17.1309 6.44531 23.5771 0.445312c6.68164 -6.22656 6.68164 -16.3584 0 -22.585l-25.0264 -23.3262c-0.890625 -0.834961 -2.33984 -0.834961 -3.22559 0
+l-25.0322 23.3262c-6.68066 6.23145 -6.68066 16.3535 0 22.585c6.43652 6 16.7939 5.28906 23.5732 -0.445312l3.06641 -2.60156zM246.574 212.485c6.78418 5.73438 17.1367 6.44629 23.5771 0.445312c6.68164 -6.22559 6.68164 -16.3584 0 -22.584l-25.0264 -23.3271
+c-0.890625 -0.834961 -2.33984 -0.834961 -3.22559 0l-25.0312 23.3271c-6.68164 6.23047 -6.68164 16.3525 0 22.584c6.43555 6.00098 16.793 5.28906 23.5723 -0.445312l3.06641 -2.60156zM388.792 238.981c6.67676 -6.22656 6.67676 -16.3535 0.00585938 -22.585
+l-25.0273 -23.3262c-0.890625 -0.834961 -2.33984 -0.834961 -3.22559 0l-25.0312 23.3262c-6.68164 6.23145 -6.68164 16.3535 0 22.585c6.43555 6 16.7939 5.28906 23.5723 -0.445312l3.06738 -2.60156l3.06641 2.60156c6.78418 5.73438 17.1318 6.44531 23.5723 0.445312
+zM319.575 130.565c6.78418 5.73926 17.1367 6.45117 23.5771 0.445312c6.68164 -6.22656 6.68164 -16.3584 0 -22.585l-25.0264 -23.3262c-0.890625 -0.834961 -2.33984 -0.834961 -3.22559 0l-25.0312 23.3262c-6.68164 6.23145 -6.68164 16.3535 0 22.585
+c6.43555 6 16.793 5.28906 23.5723 -0.445312l3.06641 -2.60156zM168.259 228.94c-0.890625 -0.829102 -2.33984 -0.829102 -3.2207 0l-25.0312 23.3271c-6.68164 6.23145 -6.68164 16.3535 0 22.584c6.43555 6.00098 16.793 5.28906 23.5723 -0.445312l3.06641 -2.60059
+l3.06738 2.60059c6.78418 5.73438 17.1309 6.44629 23.5723 0.445312c6.68164 -6.22559 6.68164 -16.3584 0 -22.584zM488.781 50.2891c0.470703 -2.12988 0.00976562 -4.3623 -1.26465 -6.13379c-1.27539 -1.77148 -3.24121 -2.91895 -5.41211 -3.1543l-189.44 -20.4805
+c-3.50684 -0.358398 -6.75781 1.63867 -7.99707 4.90039l-33.3057 87.4141l-29.0352 -87.1074c-1.05469 -3.16406 -4.00977 -5.25293 -7.28125 -5.25293c-0.276367 0 -0.547852 0.015625 -0.829102 0.0458984l-189.44 20.4805
+c-2.1709 0.235352 -4.13672 1.38281 -5.41113 3.1543c-1.27539 1.77148 -1.73633 4.00391 -1.26465 6.13379l56.1406 255.186v60.6055c0 4.24414 3.44043 7.67969 7.67969 7.67969h343.04c4.23926 0 7.67969 -3.43555 7.67969 -7.67969v-60.6055zM417.28 358.4h-327.681
+v-46.0801h325.12c0.901367 0 1.75684 -0.18457 2.56055 -0.47168v46.5518zM426.46 50.4375l45.4814 4.91016l-17.4746 79.4316c-0.834961 -1.9668 -2.08887 -3.80957 -3.79395 -5.39648l-25.0264 -23.3271c-0.891602 -0.834961 -2.33984 -0.834961 -3.22559 0
+l-25.0322 23.3271c-6.68164 6.23047 -6.68164 16.3525 0 22.584c6.43555 6.00098 16.7939 5.28906 23.5723 -0.445312l3.06738 -2.60156l3.06641 2.60156c6.78418 5.73438 17.1318 6.44629 23.5732 0.445312
+c0.00976562 -0.00488281 0.00976562 -0.015625 0.0205078 -0.0205078l-18.6172 84.6084c-0.649414 -0.0615234 -1.32031 0.117188 -1.82227 0.583008l-25.0322 23.3271c-6.68066 6.23047 -6.68066 16.3535 0 22.584c4.29102 3.99902 10.3066 4.96094 15.8623 3.49707
+l-2.52441 11.4795c-1.13672 -0.661133 -2.43164 -1.06543 -3.83496 -1.06543h-83.3379c-0.307617 -3.65527 -1.88379 -7.23438 -4.87988 -10.0254l-25.0264 -23.3262c-0.890625 -0.834961 -2.33984 -0.834961 -3.22559 0l-25.0312 23.3262
+c-2.99512 2.79102 -4.56738 6.37012 -4.87988 10.0254h-180.244l-16.6963 -75.8682c6.05176 2.33496 13.3994 0.942383 18.627 -3.48145l3.06641 -2.60059l3.06738 2.60059c6.7832 5.73438 17.1309 6.44629 23.5723 0.445312c6.68164 -6.22559 6.68164 -16.3584 0 -22.584
+l-25.0264 -23.3271c-0.891602 -0.833984 -2.33984 -0.833984 -3.22559 0l-25.0322 23.3271c-0.209961 0.194336 -0.347656 0.419922 -0.542969 0.624023l-30.9658 -140.738l174.771 -18.8926l33.8848 101.647c1.02832 3.07715 3.875 5.18066 7.12695 5.24805h0.158203
+c3.17969 0 6.04199 -1.96094 7.17871 -4.94141l38.8506 -101.979l70.1641 7.58203c-5.10449 6.25195 -4.66406 15.2012 1.45898 20.9102c6.43652 6.00098 16.7939 5.28906 23.5723 -0.445312l3.06738 -2.60059l3.06641 2.60059
+c6.78418 5.73438 17.1318 6.44629 23.5732 0.445312c4.21387 -3.93164 5.75488 -9.41504 4.64844 -14.4941z" />
+  </font>
+</defs></svg>

data/spec/fixtures/shared/vectors/C.svg

@@ -1,4 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
-<path d="M50,0C22.389,0,0,22.383,0,49.994V100h100V49.994C100,22.383,77.617,0,50,0z M96.667,96.667H3.333V49.994  c0-25.729,20.938-46.66,46.667-46.66c25.729,0,46.667,20.931,46.667,46.66V96.667z"/>
-<path d="M50,10c-22.083,0-40,17.91-40,39.994V90l30-30V50c0-5.521,4.479-10,10-10c5.521,0,10,4.479,10,10v10l30,30V49.994  C90,27.91,72.09,10,50,10z"/>
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:boxy="http://www.boxy-svg.com/boxyNS" version="1.1" id="Layer_1" x="0px" y="0px" width="100" height="100" enable-background="new 0 0 100 100" xml:space="preserve" boxy:zoom="494" boxy:scrollX="-53" boxy:scrollY="-3" viewBox="0 0 100 100">
+  <defs/>
+  <path d="M45.403,66.2c-0.994,0-1.8-0.806-1.8-1.8c0-1.624-1.321-2.944-2.944-2.944s-2.944,1.32-2.944,2.944  c0,0.994-0.806,1.8-1.8,1.8s-1.8-0.806-1.8-1.8c0-3.609,2.936-6.545,6.544-6.545s6.544,2.936,6.544,6.545  C47.203,65.395,46.397,66.2,45.403,66.2z" transform="matrix(0.949885 0 0 0.949885 3.2667 -0.723619)"/>
+  <path d="M63.434,66.2c-0.994,0-1.8-0.806-1.8-1.8c0-1.624-1.321-2.944-2.944-2.944c-1.624,0-2.944,1.32-2.944,2.944  c0,0.994-0.807,1.8-1.801,1.8c-0.993,0-1.8-0.806-1.8-1.8c0-3.609,2.936-6.545,6.545-6.545c3.608,0,6.544,2.936,6.544,6.545  C65.233,65.395,64.428,66.2,63.434,66.2z" transform="matrix(0.949885 0 0 0.949885 3.2667 -0.723619)"/>
+  <path d="M49.033,95c-18.607,0-24.776-15.139-26.436-20.825c-1.628-0.313-3.063-1.124-4.228-2.4  c-5.735-6.292-2.96-23.055-2.625-24.946c0.18-1.016,0.924-1.841,1.916-2.124c0.989-0.282,2.059,0.021,2.749,0.79l8.1,9  c0.998,1.108,0.908,2.814-0.2,3.812c-1.108,0.999-2.815,0.908-3.812-0.2l-4.144-4.604c-0.44,5.725-0.179,12.236,2.008,14.634  c0.566,0.62,1.212,0.847,2.148,0.773c1.378-0.133,2.649,0.854,2.885,2.237c0.132,0.746,3.45,18.452,21.639,18.452  c18.189,0,21.507-17.706,21.64-18.459c0.242-1.376,1.5-2.354,2.885-2.23c0.985,0.076,1.654-0.155,2.23-0.793  c2.102-2.322,2.29-8.502,1.902-13.686l-3.272,3.667c-0.993,1.11-2.699,1.209-3.812,0.216c-1.112-0.993-1.21-2.7-0.217-3.812  l7.23-8.101c0.688-0.767,1.749-1.081,2.742-0.801c0.991,0.276,1.739,1.095,1.928,2.108c0.334,1.807,3.107,17.837-2.496,24.031  c-1.183,1.307-2.652,2.132-4.325,2.443C73.804,79.876,67.631,95,49.033,95z" transform="matrix(0.949885 0 0 0.949885 3.2667 -0.723619)"/>
+  <path d="M49.029,84.2c-5.635,0-11.02-2.135-14.772-5.858c-0.705-0.7-0.711-1.839-0.01-2.545c0.698-0.707,1.839-0.711,2.545-0.011  c3.084,3.06,7.545,4.813,12.237,4.813s9.152-1.754,12.236-4.813c0.706-0.699,1.847-0.695,2.546,0.011  c0.7,0.706,0.695,1.845-0.011,2.545C60.048,82.065,54.664,84.2,49.029,84.2z" transform="matrix(0.949885 0 0 0.949885 3.2667 -0.723619)"/>
+  <path d="M49.004,5c-4.963,0-9,4.038-9,9s4.037,9,9,9c4.962,0,9-4.038,9-9S53.966,5,49.004,5z M49.004,17.6  c-1.985,0-3.601-1.614-3.601-3.6s1.615-3.6,3.601-3.6s3.6,1.614,3.6,3.6S50.989,17.6,49.004,17.6z" transform="matrix(0.949885 0 0 0.949885 3.2667 -0.723619)"/>
+  <path d="M49.903,19.4h-4.5L25.604,42.8c0,0,18.9-4.5,23.4-4.5" transform="matrix(0.949885 0 0 0.949885 3.2667 -0.723619)"/>
+  <path d="M48.104,19.4h4.5l19.8,23.399c0,0-18.899-4.5-23.399-4.5" transform="matrix(0.949885 0 0 0.949885 3.2667 -0.723619)"/>
+  <path d="M71.003,57.708c-23.275-14.131-42.109-0.712-42.899-0.133l-3.205-4.346c0.222-0.165,22.467-16.188,48.906-0.138  L71.003,57.708z" transform="matrix(0.949885 0 0 0.949885 3.2667 -0.723619)"/>
+  <path d="M20.203,50.001c-1.131,0-2.184-0.716-2.561-1.848c-0.472-1.414,0.293-2.943,1.708-3.414l7.37-2.458l4.009-4.811  c0.634-0.76,1.634-1.113,2.604-0.918l7.948,1.589l6.291-3.931c0.876-0.547,1.986-0.547,2.862,0l6.291,3.931l7.949-1.589  c0.968-0.195,1.97,0.158,2.603,0.918l3.98,4.776l8.222,2.467c1.429,0.429,2.238,1.934,1.81,3.362  c-0.428,1.428-1.928,2.243-3.361,1.81l-9-2.7c-0.508-0.152-0.959-0.45-1.299-0.856l-3.472-4.166l-7.425,1.484  c-0.673,0.134-1.376,0.007-1.96-0.358l-5.769-3.604l-5.77,3.604c-0.584,0.364-1.287,0.492-1.96,0.358l-7.425-1.484l-3.472,4.166  c-0.322,0.386-0.744,0.674-1.221,0.832l-8.101,2.7C20.774,49.956,20.486,50.001,20.203,50.001z" transform="matrix(0.949885 0 0 0.949885 3.2667 -0.723619)"/>
+  <path d="M54.402,74.3c-0.392,0-0.785-0.126-1.116-0.389c-0.359-0.278-3.526-2.589-6.759-0.006c-0.774,0.621-1.908,0.496-2.529-0.281  c-0.621-0.776-0.495-1.909,0.281-2.529c4.448-3.56,9.303-1.558,11.248,0c0.777,0.62,0.903,1.753,0.281,2.529  C55.454,74.068,54.93,74.3,54.402,74.3z" transform="matrix(0.949885 0 0 0.949885 3.2667 -0.723619)"/>
 </svg>

data/spec/fixtures/shared/vectors/D.svg

@@ -1,3 +1,15 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
-<path style="fill:#010101;" d="M87.5,75c-3.039,0-5.725,1.221-7.886,3.016l-19.056-13.6c1.209-2.49,1.941-5.225,1.941-8.166  c0-4.041-1.318-7.775-3.491-10.828l22.29-22.302C83.154,24.207,85.193,25,87.5,25c6.909,0,12.5-5.591,12.5-12.5S94.409,0,87.5,0  S75,5.591,75,12.5c0,2.307,0.793,4.346,1.88,6.201L54.59,41.004c-3.076-2.197-6.787-3.504-10.84-3.504  c-7.153,0-13.306,4.064-16.467,9.973l-15.052-5.029C11.621,39.637,9.24,37.5,6.25,37.5C2.795,37.5,0,40.295,0,43.75  S2.795,50,6.25,50c1.574,0,2.979-0.635,4.077-1.6l14.966,4.993C25.146,54.334,25,55.273,25,56.25C25,66.602,33.398,75,43.75,75  c5.151,0,9.826-2.088,13.221-5.457l18.933,13.514C75.366,84.448,75,85.926,75,87.5c0,6.896,5.591,12.5,12.5,12.5  S100,94.396,100,87.5S94.409,75,87.5,75z"/>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
+<g id="Layer_2">
+</g>
+<g id="Layer_1">
+	<g>
+		<path fill="#000000" d="M17.947,61.858l-0.599,0.508l-0.599-0.508c-1.324-1.12-3.347-1.259-4.604-0.087    c-1.305,1.217-1.305,3.194,0,4.411l4.889,4.556c0.173,0.163,0.456,0.163,0.63,0l4.888-4.556c1.305-1.216,1.305-3.195,0-4.411    C21.294,60.599,19.272,60.738,17.947,61.858z"/>
+		<path fill="#000000" d="M36.144,66.812l-0.599,0.508l-0.599-0.508c-1.324-1.12-3.347-1.259-4.604-0.087    c-1.305,1.217-1.305,3.194,0,4.411l4.889,4.556c0.173,0.163,0.456,0.163,0.63,0l4.888-4.556c1.305-1.216,1.305-3.195,0-4.411    C39.49,65.553,37.469,65.692,36.144,66.812z"/>
+		<path fill="#000000" d="M48.159,45.999l-0.599,0.508l-0.599-0.508c-1.324-1.12-3.347-1.259-4.604-0.087    c-1.305,1.217-1.305,3.194,0,4.411l4.889,4.556c0.173,0.163,0.456,0.163,0.63,0l4.888-4.556c1.305-1.216,1.305-3.195,0-4.411    C51.506,44.74,49.484,44.879,48.159,45.999z"/>
+		<path fill="#000000" d="M75.936,40.824c-1.258-1.172-3.279-1.033-4.604,0.087l-0.599,0.508l-0.599-0.508    c-1.324-1.12-3.347-1.259-4.604-0.087c-1.305,1.217-1.305,3.194,0,4.411l4.889,4.556c0.173,0.163,0.456,0.163,0.63,0l4.888-4.556    C77.24,44.018,77.24,42.04,75.936,40.824z"/>
+		<path fill="#000000" d="M62.417,61.999l-0.599,0.508l-0.599-0.508c-1.324-1.12-3.347-1.259-4.604-0.087    c-1.305,1.217-1.305,3.194,0,4.411l4.889,4.556c0.173,0.163,0.456,0.163,0.63,0l4.888-4.556c1.305-1.216,1.305-3.195,0-4.411    C65.764,60.739,63.742,60.878,62.417,61.999z"/>
+		<path fill="#000000" d="M32.863,42.785l4.888-4.556c1.305-1.216,1.305-3.195,0-4.411c-1.258-1.172-3.279-1.033-4.604,0.087    l-0.599,0.508l-0.599-0.508c-1.324-1.12-3.347-1.259-4.604-0.087c-1.305,1.217-1.305,3.194,0,4.411l4.889,4.556    C32.406,42.947,32.689,42.947,32.863,42.785z"/>
+		<path fill="#000000" d="M95.465,77.678L84.5,27.837V16c0-0.829-0.672-1.5-1.5-1.5H16c-0.828,0-1.5,0.671-1.5,1.5v11.837    L3.535,77.678c-0.092,0.416-0.002,0.852,0.247,1.198s0.633,0.57,1.057,0.616l37,4c0.055,0.006,0.108,0.009,0.162,0.009    c0.639,0,1.216-0.408,1.422-1.026l5.671-17.013l6.505,17.073c0.242,0.637,0.877,1.027,1.562,0.957l37-4    c0.424-0.046,0.808-0.27,1.057-0.616S95.557,78.094,95.465,77.678z M81.5,17.5v9.092C81.343,26.536,81.176,26.5,81,26.5H17.5v-9    H81.5z M83.293,77.649c0.216-0.992-0.085-2.063-0.908-2.831c-1.258-1.172-3.279-1.033-4.604,0.087l-0.599,0.508l-0.599-0.508    c-1.324-1.12-3.347-1.259-4.604-0.087c-1.196,1.115-1.282,2.863-0.285,4.084l-13.704,1.481l-7.588-19.918    C50.18,59.883,49.621,59.5,49,59.5c-0.011,0-0.021,0-0.031,0c-0.635,0.013-1.191,0.424-1.392,1.025l-6.618,19.853l-34.135-3.69    L12.872,49.2c0.038,0.04,0.065,0.084,0.106,0.122l4.889,4.556c0.173,0.163,0.456,0.163,0.63,0l4.888-4.556    c1.305-1.216,1.305-3.195,0-4.411c-1.258-1.172-3.279-1.033-4.604,0.087l-0.599,0.508l-0.599-0.508    c-1.021-0.864-2.456-1.136-3.638-0.68L17.206,29.5H52.41c0.061,0.714,0.368,1.413,0.953,1.958l4.889,4.556    c0.173,0.163,0.456,0.163,0.63,0l4.888-4.556c0.585-0.545,0.893-1.244,0.953-1.958H81c0.274,0,0.527-0.079,0.749-0.208    l0.493,2.242c-1.085-0.286-2.26-0.098-3.098,0.683c-1.305,1.217-1.305,3.194,0,4.411l4.889,4.556    c0.098,0.091,0.229,0.126,0.356,0.114l3.636,16.525c-0.002-0.001-0.002-0.003-0.004-0.004c-1.258-1.172-3.279-1.033-4.604,0.087    l-0.599,0.508l-0.599-0.508c-1.324-1.12-3.347-1.259-4.604-0.087c-1.305,1.217-1.305,3.194,0,4.411l4.889,4.556    c0.173,0.163,0.456,0.163,0.63,0l4.888-4.556c0.333-0.31,0.578-0.67,0.741-1.054l3.413,15.514L83.293,77.649z"/>
+	</g>
+</g>
 </svg>

data/spec/fixtures/shared/vectors/a_R3ally-eXotic f1Le Name.svg

@@ -1,3 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" baseProfile="tiny" id="Layer_1" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" xml:space="preserve">
-<path fill="#000000" d="M96.897,37.513c1.921,0,3.478-1.558,3.478-3.479c0-1.92-1.557-3.478-3.478-3.478s-3.478,1.558-3.478,3.478  c0,0.422,0.079,0.825,0.217,1.2l-10.153,8.649l-12.864-7.567c0.073-0.297,0.116-0.607,0.116-0.927c0-2.142-1.736-3.878-3.878-3.878  c-0.869,0-1.668,0.289-2.314,0.772L52.92,23.054c0.054-0.22,0.086-0.448,0.086-0.684c0-1.581-1.281-2.861-2.861-2.861  s-2.861,1.281-2.861,2.861c0,0.729,0.275,1.393,0.724,1.898l-5.835,12.488c-0.26-0.045-0.526-0.074-0.8-0.074  c-0.86,0-1.662,0.239-2.351,0.647l-15.438-6.915c0.036-0.225,0.06-0.454,0.06-0.689c0-2.38-1.929-4.309-4.309-4.309  c-2.379,0-4.309,1.929-4.309,4.309s1.929,4.309,4.309,4.309c1.352,0,2.556-0.623,3.346-1.596l14.682,6.576  c-0.384,0.674-0.607,1.452-0.607,2.284c0,0.852,0.293,1.605,0.694,2.29l-8.233,8.237c-1.136-0.811-2.506-1.294-4.003-1.294  c-2.642,0-4.915,1.501-6.082,3.684l-0.096-0.032c-0.001,0.012-0.004,0.023-0.005,0.035L7.553,49.002  c0.016-0.134,0.025-0.271,0.025-0.409c0-1.989-1.612-3.601-3.601-3.601s-3.601,1.612-3.601,3.601s1.612,3.601,3.601,3.601  c1.054,0,1.999-0.455,2.657-1.177l11.723,5.329c-0.005,0.013-0.009,0.025-0.015,0.037l0.056,0.019  c-0.054,0.348-0.108,0.694-0.108,1.055c0,1.954,0.813,3.716,2.115,4.975l-0.017,0.013c0.004,0.005,0.008,0.01,0.012,0.014  l-5.973,8.802c-0.155-0.027-0.314-0.044-0.478-0.044c-1.479,0-2.678,1.198-2.678,2.678c0,1.479,1.199,2.678,2.678,2.678  c1.479,0,2.678-1.199,2.678-2.678c0-0.501-0.14-0.969-0.38-1.37l5.364-7.904l0.71-0.877c0.881,0.407,1.859,0.641,2.894,0.641  c1.902,0,3.629-0.771,4.883-2.016l6.993,4.991c-0.199,0.514-0.334,1.06-0.334,1.641c0,2.548,2.065,4.617,4.617,4.617  c2.159,0,3.965-1.483,4.471-3.482l15.916-4.923c0.977,1.815,2.893,3.05,5.099,3.05c1.273,0,2.447-0.417,3.403-1.114l7.12,6.611  c-0.038,0.193-0.059,0.393-0.059,0.597c0,1.734,1.406,3.14,3.14,3.14s3.139-1.405,3.139-3.14c0-1.733-1.405-3.139-3.139-3.139  c-0.707,0-1.358,0.236-1.883,0.631l-6.811-6.323c0.552-0.887,0.893-1.93,0.893-3.05c0-2.815-1.661-5.16-4.661-5.677V39.104  c1-0.172,1.082-0.478,1.513-0.878l13.332,7.848l11.179,15.655c-0.092,0.23-0.146,0.481-0.146,0.745c0,1.125,0.91,2.037,2.035,2.037  s2.037-0.912,2.037-2.037s-0.913-2.037-2.038-2.037c-0.03,0-0.06,0.003-0.09,0.005L85.094,45.422l9.931-8.459  C95.565,37.31,96.207,37.513,96.897,37.513z M61.07,62.474c0,0.21,0.013,0.416,0.035,0.62l-15.275,4.724  c-0.522-1.975-2.316-3.435-4.458-3.435c-1.123,0-2.114,0.451-2.913,1.113l-7.038-5.022c0.447-0.92,0.717-1.93,0.717-3.017  c0-1.492-0.487-2.871-1.29-3.999l8.233-8.237c0.686,0.401,1.438,0.694,2.291,0.694c1.642,0,3.079-0.857,3.897-2.147l17.222,14.914  C61.609,59.699,61.07,61.022,61.07,62.474z M66,56.797c-1,0.1-1.135,0.273-1.596,0.502l-18.36-15.846  c0.002-0.052-0.023-0.102-0.023-0.154c0-1.485-0.718-2.802-1.806-3.646l5.799-12.428c0.046,0.002,0.088,0.007,0.134,0.007  c0.53,0,1.023-0.147,1.449-0.399l11.621,9.229c-0.151,0.415-0.113,0.861-0.113,1.328c0,1.757,0.895,3.238,2.895,3.715V56.797z"/>
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:boxy="http://www.boxy-svg.com/boxyNS" version="1.1" id="Layer_1" x="0px" y="0px" width="100" height="100" enable-background="new -346 256 100 100" xml:space="preserve" boxy:zoom="278" boxy:scrollX="-153" boxy:scrollY="-70" viewBox="0 0 100 100">
+  <defs/>
+  <path d="M-263.363,311.56l-6.967-25.521l-19.562-12.246l19.148-3.609l0.413-5.213c0,0-14.309-6.192-25.391-8.708  c-2.433-0.553-4.653,8.025-6.731,7.853c-2.199-0.184-3.021-8.415-4.454-7.966c-8.955,2.807-14.775,15.64-14.775,15.64l13.432,5.213  l-19.7,16.04v42.107L-337.167,356h87.984L-263.363,311.56z M-296.575,337.709c-11.64,0-21.076-9.436-21.076-21.076  c0-11.639,9.436-21.075,21.076-21.075s21.076,9.436,21.076,21.075C-275.499,328.273-284.936,337.709-296.575,337.709z" transform="matrix(0.881719 0 0 0.881719 308.838 -224.858)"/>
+  <path d="M-297.026,313.592c-1.286-0.602-2.143-1.31-2.143-2.443c0-1.664,0.935-2.584,2.143-3.08V313.592L-297.026,313.592z   M-295.195,319.575c1.323,0.602,2.258,1.416,2.258,2.727c0,1.31-0.973,2.194-2.258,2.69V319.575L-295.195,319.575z   M-297.026,301.271v2.62c-4.167,0.46-7.828,2.621-7.828,7.471c0,4.921,4.323,6.195,7.828,7.435v6.621  c-0.273,0.07-0.506,0.07-0.74,0.07c-2.142,0-4.284-0.602-6.153-1.521l-0.507,4.461c2.688,0.601,4.011,0.956,6.971,0.956  c0.117,0,0.273,0,0.429-0.036v2.797h1.831v-2.902c4.478-0.496,7.944-2.69,7.944-7.33c0-5.098-4.519-6.372-7.944-7.611v-6.55  c0.117-0.035,0.194-0.035,0.311-0.035c1.908,0,3.816,0.39,5.53,1.062l0.507-4.071c-1.948-0.603-4.051-0.886-6.348-0.886v-2.548  H-297.026L-297.026,301.271z" transform="matrix(0.881719 0 0 0.881719 308.838 -224.858)"/>
 </svg>

data/spec/fontcustom/base_spec.rb

@@ -34,9 +34,8 @@ describe Fontcustom::Base do
     it "should return hash of all vectors and templates" do
       pending "SHA2 is different on CI servers. Why?"
       allow(Fontcustom::Base).to receive(:check_fontforge)
-      base = Fontcustom::Base.new({})
+      base = Fontcustom::Base.new(:input => {:vectors => fixture("shared/vectors")})
       base.instance_variable_set :@options, {
-        :input => {:vectors => fixture("shared/vectors")},
         :templates => Dir.glob(File.join(fixture("shared/templates"), "*"))
       }
       hash = base.send :checksum

data/spec/fontcustom/cli_spec.rb

@@ -7,8 +7,23 @@ describe Fontcustom::CLI do
       live_test do |testdir|
         Fontcustom::CLI.start ["compile", "vectors", "--quiet"]
         manifest = File.join testdir, ".fontcustom-manifest.json"
+        preview = File.join testdir, "fontcustom", "fontcustom-preview.html"
+
         expect(Dir.glob(File.join(testdir, "fontcustom", "fontcustom_*\.{ttf,svg,woff,eot}")).length).to eq(4)
         expect(File.read(manifest)).to match(/"fonts":.+fontcustom\/fontcustom_.+\.ttf"/m)
+        expect(File.exists?(preview)).to be_truthy
+      end
+    end
+
+    it "should generate fonts and templates according to passed options (integration)", :integration => true do
+      live_test do |testdir|
+        Fontcustom::CLI.start ["compile", "vectors", "--font-name", "example", "--preprocessor-path", "../foo/bar", "--templates", "css", "scss-rails", "preview", "--no-hash", "--base64", "--quiet"]
+        manifest = File.join testdir, ".fontcustom-manifest.json"
+        css = Dir.glob(File.join("example", "*.scss")).first
+
+        expect(File.read(manifest)).to match(/"fonts":.+example\/example\.ttf"/m)
+        expect(File.read(css)).to match("x-font-woff")
+        expect(File.read(css)).to match("../foo/bar/")
       end
     end
   end

data/spec/fontcustom/generator/template_spec.rb

@@ -85,4 +85,15 @@ describe Fontcustom::Generator::Template do
       gen.send :create_files
     end
   end
+  
+  context ".font_face" do
+    it "should return base64 when options are set" do 
+      gen = Fontcustom::Generator::Template.new fixture("generators/.fontcustom-manifest.json")
+      allow(gen).to receive(:woff_base64).and_return("3xampled4ta")
+      options = gen.instance_variable_get :@options
+      options[:base64] = true
+
+      expect(gen.send(:font_face)).to match("x-font-woff")
+    end
+  end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: fontcustom
 version: !ruby/object:Gem::Version
-  version: 1.3.5
+  version: 1.3.6
 platform: ruby
 authors:
 - Kai Zau
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-11-24 00:00:00.000000000 Z
+date: 2014-11-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: json
@@ -91,16 +91,16 @@ dependencies:
   name: rspec
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '>='
+    - - ~>
       - !ruby/object:Gem::Version
-        version: '0'
+        version: 3.1.0
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '>='
+    - - ~>
       - !ruby/object:Gem::Version
-        version: '0'
+        version: 3.1.0
 description: Font Custom makes using vector icons easy. Generate icon fonts and supporting
   templates (e.g. @font-face CSS) from a collection of SVGs.
 email:
@@ -141,6 +141,13 @@ files:
 - lib/fontcustom/utility.rb
 - lib/fontcustom/version.rb
 - lib/fontcustom/watcher.rb
+- spec/fixtures/example/_example-rails.scss
+- spec/fixtures/example/example-preview.html
+- spec/fixtures/example/example.css
+- spec/fixtures/example/example.eot
+- spec/fixtures/example/example.svg
+- spec/fixtures/example/example.ttf
+- spec/fixtures/example/example.woff
 - spec/fixtures/generators/.fontcustom-manifest-corrupted.json
 - spec/fixtures/generators/.fontcustom-manifest-empty.json
 - spec/fixtures/generators/.fontcustom-manifest.json
@@ -201,6 +208,13 @@ signing_key:
 specification_version: 4
 summary: Generate icon fonts from the command line.
 test_files:
+- spec/fixtures/example/_example-rails.scss
+- spec/fixtures/example/example-preview.html
+- spec/fixtures/example/example.css
+- spec/fixtures/example/example.eot
+- spec/fixtures/example/example.svg
+- spec/fixtures/example/example.ttf
+- spec/fixtures/example/example.woff
 - spec/fixtures/generators/.fontcustom-manifest-corrupted.json
 - spec/fixtures/generators/.fontcustom-manifest-empty.json
 - spec/fixtures/generators/.fontcustom-manifest.json