M

ALX DESIGN

HOME / FONT /

How to create your own icon font

If fontawesome doesn't satisfy your needs, this tutorial will help you creating icons and generate your own web icon font.

Icons creation

Of course, we are working on a vector graphics software.

The objective is to create monochromatic pictograms, composed of solid and empty parts.

The basis for icon creation is to constrain yourself to a template, which will define a minimum drawing size for your shapes and then harmonize your icon family.

I chose to work on a template grid of 24 units on each side:

How to create your own icon font

The drawing marks are used to define bleed and borders for any shape, a circular icon must fit the dedicated marker, and any other shape must not exceed rectangular markings.

It is also assumed that any plot must have a minimum width of one unit on the grid:

How to create your own icon font

With this standard, we can deduce that for a minimum display size of 24 x 24 pixels, the smallest plot will have at least a thickness of one pixel, 2 pixels for 48 x 48 etc.

Recommandations

I think that a 24 x 24 template grid should be considered as a critical size, a 32 x 32 grid should give more freedom for the icon creation.

The smaller the grid, the more you have to turn to a minimalist style.

Some examples of my research

How to create your own icon font How to create your own icon font How to create your own icon font

Try different variant to find the one that suits best.

How to create your own icon font How to create your own icon font
How to create your own icon font How to create your own icon font

Find the most relevant style.

How to create your own icon font How to create your own icon font

Stick to minimalism, less is better.

How to create your own icon font How to create your own icon font How to create your own icon font How to create your own icon font

Try different sizes including the final real display size.

Export your icons as EPS or SVG files.

Font generation

We will need a software to assemble your icons into a font:

Download Font Forge

Install and launch Font Forge.

How to create your own icon font

Ready to create your own brand new font.

Select the upper-case "A" glyph and click File > Import, then select the icon you want to associate.

How to create your own icon font

Then continue associating icons to glyphs.

When done, click File > Generate Fonts..., Select Web Open Font, give it a name like "icon.woff" or anything you like, and press Generate.

Use your webfont

The next step consists to make your font usable as a font face onto your website.

We'll use an online font generator to do it properly: https://www.fontsquirrel.com/tools/webfont-generator.

How to create your own icon font

Upload your generated icon font and valid the agreements.

How to create your own icon font

When ready, click Download your kit.

Then you'll find instructions into the demo page of your kit.

In a nutshell, it's about defining a fontface rule style sheet like this:

@font-face {
font-family: 'icon';
src: url('icon-webfont.woff2') format('woff2'),
 url('icon-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

Then any character on your website using the font-family "icons" will be converted into the corresponding icon.

Info

woff2 is the lightest and best format in terms of weight/quality.

Tip

During the first loading of your page, to avoid any FOUT effect (Flash Of Unstyled Text), you could indicate to the web browser to preload your font by adding a line between the <head> and </head> tags:

<link rel="preload" href="font/icon-webfont.woff2" as="font" type="font/woff" crossorigin>
<link rel="preload" href="font/icon-webfont.woff" as="font" type="font/woff" crossorigin>

This may eventualy results in a FOIT effect (Flash Of Invisible Text) which is, in my point, a lesser evil.

We are done!

BACK TO HOME

Leave a comment ?