Reconciling SVG and Icon Fonts

44 notes

EDIT Updated article to reflect the latest version of fontcustom

(Thanks @kaishin for the cool title)

Hey fellas,

If you’re a cutting edge designer, you already work right in the browser. You need to iterate a lot to get to something that feels right. Icon Fonts until then were absolutely not adapted to this process.

In this first article on SVG, I’ll explain how to set up a powerful design workflow, going from Sketch (my new favorite SVG editing app), all the way to the browser as Icon Fonts, all automated.

What you’ll get with this tutorial :

Edit a bunch of SVG files in Sketch, see them update live in your browser, already compiled as an Icon Font.

The Setup

Supporting Technologies :

  • SVG is becoming the web’s darling since Retina displays are spreading. They’re standard, light, infinitely scalable and really fit the current Flat design aesthetic.

  • Icon fonts are sort of the "Sprites for Vector". They’re fashionable right now for their small weight, despite being a real pain to handle in an iterative design process.

Tools used :

  • Sketch: An amazing app from Bohemian Coding, allowing you to easily create and edit SVG files among several other qualities.

  • Fontcustom: A cool tool by Joshua Gross and Yifei Zhang, offering you to monitor a folder of SVGs and automatically build a set of font files with the right css file to describe the glyphs

  • Middleman + Sprockets + Livereload : Because it’s the coolest ruby setup for static sites. If you’re doing Sinatra or Rails, instructions should be the same.

Prerequisites

First, install the prerequisites for fontcustom with brew on a mac:

brew install fontforge ttfautohint

If you use a non-ruby stack, then Font Custom is available standalone with :

gem install fontcustom

Otherwise, read on, it gets really cool.

Set up Middleman :

Create your middleman project (if it’s not already done)

Initialize

middleman init YOUR_PROJECT

Edit your Gemfile

Add the fontcustom gem, with a specific branch. That’s because master currently has a nasty bug in the watcher causing infinite reloads with Livereload.

In your Gemfile:

source :rubygems

gem 'middleman'
gem 'middleman-sprockets'  # The best asset pipeline
gem 'middleman-livereload' # Save a file, see your browser reload
gem 'fontcustom'

Then in terminal :

bundle install

In config.rb:

Throttle Livereload to give fontcustom time to rebuild stuff and avoid double refreshes.

activate :livereload, :grace_period => 2

Start Working.

Add SVG files

Put your SVGs in a folder under sources/images. Choose any folder name. You’ll use it later. I chose myfont for this example

sources/images/myfont/

Each SVG file you’ll put there will be included in the final font.
Their name will define the CSS class you use to display it.

For example, if you create a spaceship.svg file, then you can display it with :

<i class="icon-spaceship"></i>

Create the fontcustom config file

Create a new file in config/fontcustom.yml with the following content:

##
# FONTCUSTOM CONFIG
#
# Include this file along with your vectors or pass it to any command with:
#   --config=path/to/config.yml 
#   -c path/to/containing/dir/
#
# Run `fontcustom help` to learn about various options
##

output: source/stylesheets/

templates: [ bootstrap-scss, scss ]
# Here are all the file formats you can generate you can use:
# templates: [ scss, preview, relative/path/from/INPUT, relative/path/from/PWD ]

file_hash: false

# font_name: my-font
#css_prefix: glyph-
#debug: true
#verbose: false

Open a terminal, launch middleman

middleman

Open http://localhost:4567 And let it run, so it live-reloads your site.

Open another terminal window, launch fontcustom

One Shot :

fontcustom compile source/images/icons/ -o source/stylesheets/ -t scss -h false

Watcher :

fontcustom watch source/images/icons/ -o source/stylesheets/ -t scss -h false

And let it run. What did we just launch ?

We told fontcustom to :

  • watch input_folder Watch for changes in source/images/myfont
  • -o output_folder Output a font set to source/stylesheets
  • -t scss Output our stylesheet as a scss partial.

Whenever a svg file will change, Font Custom will rebuild a uniquely named font files set.

It will also build a file named _fontcustom.scss in the sources/styesheets folder which you can import as a partial in your Sass stylesheets

Add the stylesheet to your css

@import "_fontcustom";

That’s all there is to it.

The Result:

Change in Sketch => Reload Browser.

Whenever you save a file in Sketch, it will trigger a Font Custom rebuild, which will trigger a CSS change, which will in turn trigger a Livereload refresh, displaying the updated Icon Font.

Ain’t that sweet ?

In part Two of our SVG tips, we’ll show you how to dissect them and go crazy with their components.

In yet another post, we’ll show you how to do the same thing with Sprites and Photoshop

— Romain @romain

Comments

Enjoyed this post? Then you should
  1. slsdesigns reblogged this from hullapp
  2. dyadyul reblogged this from hullapp
  3. mcdave reblogged this from hullapp
  4. nihilisteak reblogged this from hullapp
  5. sallark reblogged this from hullapp
  6. nathos reblogged this from hullapp
  7. hullapp posted this