How to save and load projects

back to help index

Select and configure icons, press the download button. Fontello creates all the necessary files in single zip archive. We strongly recommend you store the content archive on a version control system. For example, here, on github :) . That will not cost you anything, but allow to keep data safe, track changes and roll back mistakes. Also, you will not depend on accounts on 3rd-party sites, on browser changes and on hard drive crash. See, how we store icons on fontello itself.

Sometimes you need to modify an existing project - add new glyphs and so on. Every zip-file, generated by fontello, contains config.json in root. That's configuration of your project. You can always import it back to continue your work. Let's look at all possibilities.

Simple import

Just drag config.json or the whole project's zip archive to fontello page.

Or via Settings > Import menu.

That's easy.

Keep glyph codes, when importing third party SVG fonts

If you're importing an existing SVG font, prepared by third party tools, you may wish to keep existing glyph codes intact. To do it:

1. Go to Menu -> Advanced Font Settings and set encoding to unicode.
2. Import your font (as custom icons)
3. Change encoding back, as described in (1), according to your needs.

Advanced import/export

Every developer should be lazy :) . Lazy developers will say:

What hell should i do so many actions to edit existing project? Open fontello site, look for project config in my repo, drag it with mouse, download result, unzip, and copy content back... That's boring! I like to do all at once!

YES! YOU CAN! Fontello has API, that allows to completely automate your workflow. Here how we do it on fontello:

make fontopen
... here we make changes in opened browser window
make fontsave

That's all! Interested? Read below, how to do it for your project.

Well, we expect, that you listened our advice about storing your whole projects on github. Now a couple of ways to tune it for import-export

node.js way - use fontello-cli

1. Do you already have node.js? If not - install it
2. Install fontello-cli command line utility with npm install fontello-cli -g (or locally as a dev dependency)
3. Run fontello-cli --config ./path/to/config.json install or fontello-cli --config ./path/to/config.json open

This way fontello-cli will either install and extract the package or open the fontello.com webpage with preloaded configuration. Please note there are much more options that can be passed to fontello-cli and can be used to customize the build workflow much further. You can read the manual by invoking fontello-cli --help

Ruby way - use fontello_rails_converter gem

When working with Ruby you can install the fontello_rails_converter gem, which provides a simple and comfortable command line interface for working with fontello. After installing the gem you can use the following commands:

• $> fontello open will open your current fontello font in the browser right from the command line
• $> fontello convert will download the assets from the current fontello session and convert them for usage in your (Rails) project (it will also do some Sass enhancements to the stylesheets along the way).

The gem is targeted towards usage in a Rails project but does not depend on rails and can be configured to work with any other project (also from other languages).

For more information visit: https://github.com/railslove/fontello_rails_converter

Geek way - use Makefile

If you prefer to use make, how we do on fontello, here is template, that should be added to your Makefile:

# Edit here - set path to you directory with config.json & fonts

FONT_DIR      ?= ./assets/vendor/fontello/src

### Don't edit below ###

FONTELLO_HOST ?= https://fontello.com

fontopen:
	@if test ! `which curl` ; then \
		echo 'Install curl first.' >&2 ; \
		exit 128 ; \
		fi
	curl --silent --show-error --fail --output .fontello \
		--form "config=@${FONT_DIR}/config.json" \
		${FONTELLO_HOST}
	x-www-browser ${FONTELLO_HOST}/`cat .fontello`


fontsave:
	@if test ! `which unzip` ; then \
		echo 'Install unzip first.' >&2 ; \
		exit 128 ; \
		fi
	@if test ! -e .fontello ; then \
		echo 'Run `make fontopen` first.' >&2 ; \
		exit 128 ; \
		fi
	rm -rf .fontello.src .fontello.zip
	curl --silent --show-error --fail --output .fontello.zip \
		${FONTELLO_HOST}/`cat .fontello`/get
	unzip .fontello.zip -d .fontello.src
	rm -rf ${FONT_DIR}
	mv `find ./.fontello.src -maxdepth 1 -name 'fontello-*'` ${FONT_DIR}
	rm -rf .fontello.src .fontello.zip