iconography-part-two

in Design

How to convert your SVG icons into webfonts

Previously I posted an article called the benefits of converting your custom SVG icons into webfonts. We touched base on the history of pictograms, their communicational value and most importantly why we still use them today. I concluded that exporting my AI files into SVG icons made it more feasible to convert my vector graphics into fonts. Furthermore I stated If you would like to know “How to convert your icons into fonts” to stay tuned.

 

Well the time has come to show the world how it’s done. Before getting started there are a few things I’d like to clarify. Since my first post I have learned some things about SVG’s and fonts thanks to a few engaging community members. So just to be clear, this tutorial is not claiming to have the best solution out there. I’m simply sharing my journey, and the most practical solution I came up with to get the job done as smoothly and as quickly as possible.

 

 

Now Back to the Drawing Board

How can I optimize my vector icons without tarnishing the quality and performance when displaying them on the web? Note: When approaching R&D there’s nothing more resourceful than sacrificing a lamb to the google god and asking it for help. Behold! The path bestowed upon thee by the almighty google.

 

First thing we’ll want to do is create a set of vector icons that we would like to convert into fonts.  At this point we shall open our trusty Illustrator and create.  If you aren’t feeling inspired, feel free to download mine here, so you can follow along.

vector-icons

 

 

Exporting Ai to SVG files 

Once we’ve got our icons, it’s time to save them as SVGs.  Navigate to File > Save as. Then below in the modal window use the format selector and select SVG.

save-as

 

 

Now we’ll want to click the checkbox below the selector to “Use Artboards”. Make sure the “All” radial button is also selected before clicking save.

use-artboards

 

 

SVG Options Panel

Next examine the SVG Options panel and make sure all bullet points below are checked off before saving SVG files.svg-options-panel

    • SVG Profiles: SVG 1.1
    • Type: SVG
    • Subsetting: Only glyphs used (if you use a special font for your artwork)
    • Image location: Link
    • CSS Properties: Style Elements
    • Decimal Places: 1
    • [] Output fewer <tspan> elements
    • [√] Use <textPath> element for Text on Path

 

 

Well, hello… Fontello!

Now we’re ready for the webfont generator.

fontello

 

 

Drag and drop all newly converted SVG files into the custom icons container.

drag-and-drop

 

 

Then we select all our uploaded icons so that we see a red number 9 next to the custom icons header.

select-icons

 

 

To modify icon titles, select the Customize Name tab, click the filename, and then rename the icon. We can also select the next tab over and Customize Codes.

edit-name

 

 

 

We then use the slider to adjust the pixel range of the font size, and lastly, title the icon set and click the Download webfont button.

download-webfont

 

 

In Conclusion

You should have downloaded a Fontello zip file containing:

  • config.json
  • CSS folder
  • demo.html
  • Font folder
  • README.txt

 

So now that you know how to convert your SVG icons into web fonts, you should be ready to conquer your site like I did at the end of my journey. If you would like to try another font generator aside from Fontello, I’ve heard that IcoMoon is also a great resource. Once again thank you for reading my article! Join me next time for “Skeuomorphism vs Flat Design”. Salud.