How to automate icon font generation with fontello🔗

Fontello is an icon fonts generator that allow you to select icons from several icon providers like Fonticon or Fontawesome and generate a unique icon font with your selection.

You can create and download your font from the Fontello website but it's not very easy to update your font once downloaded.

Fontello provides an API that allows you to upload your font config and download the updated font.

Makefile🔗

Put the following code in your Makefile:

FONT_DIR ?= ./assets/vendor/fontello
FONTELLO_HOST ?= http://fontello.com

font-install: font-push font-pull

font-pull:
    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

font-push:
    curl --silent --show-error --fail --output .fontello \
         --form "config=@${FONT_DIR}/config.json" \
         ${FONTELLO_HOST}
    echo ${FONTELLO_HOST}/`cat .fontello`

Update FONT_DIR with the path where you want to store the Fontello webfont.

Create the font🔗

First go to http://fontello.com and create your font by selecting icons.

Then download the config file by clicking on the "Download webfont > Get config only" button.

Put the downloaded json file into the FONT_DIR you configured in the Makefile.

Install the font🔗

Use the make font-install command to download the font in your project.

Then import the fontello.css file into your sass code.

1	`@import "../vendor/fontello/css/fontello.css";`

Build your assets and you will be able to use icons in your html:

1	`<i class="icon-heart"></i>`

Update the font🔗

Use the make font-push command to send your config and start a Fontello session. You will get an url. Visit that url and update the font with the Fontello website.

Once the font is updated, press the "Save session" button.

Then use the make font-pull to update the font files in your project.

Customize the font🔗

You can customize some parameters in the font config.json file like the class prefix or the font name:

{
  "name": "",
  "css_prefix_text": "icon-",
  "css_use_suffix": false,
  "hinting": true,
  "units_per_em": 1000,
  "ascent": 850,
  "glyphs": [
  ]
}

And change each icon names with the css property:

{
  "glyphs": [
    {
      "uid": "d73eceadda1f594cec0536087539afbf",
      "css": "heart",
      "code": 59392,
      "src": "fontawesome"
    }
  ]
}

You can also do this from the Fontello website:

Last update: December 20, 2024