Put custom fonts into svg-edit
JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Latest commit 2ceb658 Dec 31, 2013
Failed to load latest commit information.
fonts Initial commit Nov 27, 2010
README.md Snippet is now visible Dec 30, 2013
font-selector.css Initial commit Nov 27, 2010
font-selector.js Initial commit Nov 27, 2010


svg-font-loader - Custom Font Loader for svg-edit


This is a custom font loader written for the amazing svg-edit project. It allows you to use completely custom fonts by loading them with the Google Font Loader.

For more details, see the original blog post


  • Create a folder called "font-selector" in the root of your svg-edit installation.

  • Copy all the files from this github into that folder

  • Add the following JavaScript snippet into svg-editor.html after all other JavaScript files in the head section:

      <!-- Font Loader Start -->
        <link rel="stylesheet" href="font-selector/font-selector.css" type="text/css"/>
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
        google.load("webfont", "1");
        <script type="text/javascript" src="font-selector/font-selector.js"></script>
      <!-- Font Loader End -->

    That's it! Now you can add custom generated fonts!

Adding Fonts

There are three steps to adding custom fonts to the font-loader

1. Generate the font files and CSS

Font Squirrel has a very neat tool for creating browser compatible font files with the CSS files included. http://www.fontsquirrel.com/fontface/generator

2. Create a font preview image

To make it so that svg-edit doesn't have to download every font at load time (some fonts are 100k+) it uses preview images in the drop down font selector. To take advantage of this performance boost you need to create an image showing what the font looks like for the selector. Create this image in your favorite editor and upload it to /fonts/font-images

3. Upload and configure

Upload the CSS for your new font to /fonts and upload all font files to /fonts/font-files. Edit your font CSS file so that all the URLs are pointing to the font-files directory. Edit font-selector.js and add your font name with the corresponding font css file and preview image file to the Smm.fonts variable. Follow the examples provided.

Now you have added a completely custom font to your svg-edit!


This code is released under the Apache License 2.0, the same license for svg-edit.

More Information

  • See my blog post on this project for more details.

  • Read about svg-edit, a javascript based image editor (It's amazing-- trust me).