websch/method-draw/font-selector

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

About

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

Installation

• 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:

    <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>
    <script type="text/javascript" src="font-selector/font-selector.js"></script>
    <script>
    $(function(){
        Smm.init('tool_font_family');
    });
    </script>
  

  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!

License

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).