Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
JavaScript CSS
Branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
fonts
README.md
font-selector.css
font-selector.js

README.md

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:

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

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

Something went wrong with that request. Please try again.