Reconciling SVG and Icon Fonts
EDIT Updated article to reflect the latest version of fontcustom
(Thanks @kaishin for the cool title)
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.
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.
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)
middleman init YOUR_PROJECT
Edit your Gemfile
Add the fontcustom gem, with a specific branch.
master currently has a nasty bug in the watcher causing infinite reloads with Livereload.
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 :
Throttle Livereload to give fontcustom time to rebuild stuff and avoid double refreshes.
activate :livereload, :grace_period => 2
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
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 :
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
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
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_folderWatch for changes in source/images/myfont
-o output_folderOutput a font set to source/stylesheets
-t scssOutput 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
That’s all there is to it.
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