Creating your own icon-font

A step-by-step guide

4 min readApr 20, 2020

This article is written in sheer frustration for lack of complete and comprehensive guide on creating an icon-font (To put in another way, an icon-glyph font where icons appear in place of characters or glyphs). This article intended for designers or beginner level developers. Here I’ll try to keep things as simple and straightforward as possible like a cooking recipe.

Ready to begin, let’s go.

Ingredients:

Icons in SVG format.
An account on any file hosting service. I used Amazon AWS (S3), you can choose any hosting service you like.
A text editor (preferably Microsoft VS Code)

Recipe:

1) Preparing icon SVGs

Convert shapes in your icons to a compound path. (In Illustrator, select all shapes, go to window > pathfinder and in the panel, click unite)

Save all icons as separate SVGs. As a good practice, name them properly.

2) Creating an icon font

Once you’re done, go to http://fontello.com and simply drag and drop all your SVGs there. If you prefer, you can also select already existing icons on fontello to add in your icon-font. Fontello is free and open-source so no worries.
Click on ‘Download Webfont’ and extract all files.
Now, in the extracted folder, you’ll find another folder named ‘font’ which will have following files — fontello.woff, fontello.woff2, fontello.ttf, fontello.eot & fontello.svg
Let’s say you wish to change the name of font from fontello to something different like — ‘webfont’. Simply rename all files inside font folder to that name i.e. — webfont.woff, webfont.woff2, webfont.ttf, webfont.eot & webfont.svg.

3) Setting up Amazon S3

Once you’re done till here, you’ll need to access your Amazon S3 account. There create a bucket to store all your icon font files. The bucket permissions will be modified for CORS (don’t worry about that now) so ideally you should create a new bucket for the purpose.

Click on Create bucket in S3 and uncheck ‘Block all public access’ in the bucket creation form.

Upload the contents of the ‘font’ folder. Feel free to create your own folder organization structure within the bucket. I used bucket > Webfont > font and uploaded all files inside this folder. While uploading the files, make sure to click on ‘Grant public access’ option.

Once the upload is complete, you’ll get hosting link of each file (basic S3 stuff)
Go to bucket permission and under CORS configuration head, copy-paste following code:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <ExposeHeader>ETag</ExposeHeader>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

4) Finalizing the CSS

Now go back to the extracted folder on your device. This time, go to CSS folder instead. You’ll find multiple CSS files there. However, for our purpose, fontello.css is the only one required. You can safely ignore all other files for time being if you aren’t a pro.

Rename fontello.css to webfont.css as well (optional).
Open webfont.css in a text editor. Replace the link of font files on top with the hosted link from S3. Replace all ‘fontello’ with ‘Webfont’.
In @font-face selector, replace the local font links with hosted font links. It should look something like this:

@font-face {
font-family: 'unide';src: url('https://your-aws-account-name.s3.amazonaws.com/webfont/webfont.eot');src: url('https://your-aws-account-name.s3.amazonaws.com/webfont/webfont.eot#iefix') format('embedded-opentype'),url('https://your-aws-account-name.s3.amazonaws.com/webfont/webfont.woff2') format('woff2'),url('https://your-aws-account-name.s3.amazonaws.com/webfont/webfont.woff') format('woff'),url('https://your-aws-account-name.s3.amazonaws.com/webfont/webfont.ttf') format('truetype'),url('https://your-aws-account-name.s3.amazonaws.com/webfont/webfont.svg') format('svg');font-weight: normal;font-style: normal;font-size: 16px;}

5) Serving the dish

That’s it! Now you can host this CSS file somewhere (Amazon S3 is a good option) simply call it in your project.

<link rel="stylesheet" href="your-webfont.css-link.css" type="text/css">

Although, this article is super-simplified in my opinion, nonetheless if you’re stuck somewhere or need assistance, just drop a response below. Also, this is in no way a perfect way given that it involves many steps. So, if you happen to know a better (or simpler) way, please share the comments.