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
That's it! Now you can add custom generated 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.