How to make your own Font Awesome font
Tags: fontawesome, font, css, svg
Published: 2022-05-23 17:45:08

## Overview
Font Awesome is a great thing, it's a font whose symbols are images. For example, we want to place such a picture on our website page:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9fqtelxxnkp45z38md7w.png)
It is enough to write a small `HTML` code, and the picture will be on our website:
```html
<i class="fa-solid fa-thumbs-up"></i>
```
But why we can't just place a picture using the `img` tag?
```html
<img src="/thumbs-up.svg" />
```
With this placement, we will not be able to change the color of the picture, for example, when hovering the mouse pointer over the picture, as well as apply `css transitions` to the color. Of course, there are solutions based on `css filters` [https://stackoverflow.com/a/50942954 ](https://stackoverflow.com/a/50942954 ), but this complicates the readability and support of the code.
There is another method to change the color of the image - add `inline svg`:
```html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
    <path fill="#0000ff" d="M128 447.1V223.1c0-17.67-14.33-31.1-32-31.1H32c-17.67 0-32 14.33-32 31.1v223.1c0 17.67 14.33 31.1 32 31.1h64C113.7 479.1 128 465.6 128 447.1zM512 224.1c0-26.5-21.48-47.98-48-47.98h-146.5c22.77-37.91 34.52-80.88 34.52-96.02C352 56.52 333.5 32 302.5 32c-63.13 0-26.36 76.15-108.2 141.6L178 186.6C166.2 196.1 160.2 210 160.1 224c-.0234 .0234 0 0 0 0L160 384c0 15.1 7.113 29.33 19.2 38.39l34.14 25.59C241 468.8 274.7 480 309.3 480H368c26.52 0 48-21.47 48-47.98c0-3.635-.4805-7.143-1.246-10.55C434 415.2 448 397.4 448 376c0-9.148-2.697-17.61-7.139-24.88C463.1 347 480 327.5 480 304.1c0-12.5-4.893-23.78-12.72-32.32C492.2 270.1 512 249.5 512 224.1z"/>
</svg>
```
The `fill` attribute is responsible for the color. But the easiest way is to change the color is the `css` styles:
```css
.icon {
   color: red;
}
```
So, in this article we:
1. Create your own font, which will consist of three vector images;
2. Convert our font to `woff` and `woff2` formats to optimize file size;
3. Develop `css` styles for convenient addition of font characters to the site page.

## 1. Creating a font
To create a font, we will need two open source programs:
- [FontForge](https://fontforge.org) - font editor;
- [Inkscape](https://inkscape.org) - vector graphics editor.

Download and install these programs, as well as download three images in `svg` format, from which we will make our font:
- [Cup](https://fontawesome.com/icons/mug-saucer?s=solid)
- [Thumbs up](https://fontawesome.com/icons/thumbs-up?s=solid)
- [Face with a smile](https://fontawesome.com/icons/face-smile?s=solid)

Please note that `thumbs up` and `face with a smile` have a resolution of: `512x512`, and `cup`: `640x512`. In order for the font characters to be centered, we need to bring them to a single resolution. In this example, we will choose the resolution `512x512`. This means that the resolution of the `cup` will have to be changed, and the image will be entered and centered in the new resolution. To do this, we will need `Inkscape'.
1. Open our `cup` in `Inkscape`;
2. Go to the menu `File` -> `Document Properties...`;
3. In the `Page` tab in the `Custom size` section, select `Units`: `px` - size in pixels. And there we set the resolution `Width` and `Height` to `512`.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/181jku4q1asbxwcq1wmz.png)
As a result, we will get a saucer and a cup handle protruding beyond the margins of the canvas:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xddsc20pd2xknjwhhkog.png)

Further:
1. Click on the image of the `cup`;
2. In the menu, select `Object` -> `Transform` -> `Scale`, set the units of measurement to `px`, tick `Scale proportionally`, set `Width` to `512` and press `Enter`, after which the value of `Height` should change proportionally.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5o3exzrhs1xb4r9ysa0y.png)
Result:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3yhpwybrxnf12wmcvf9h.png)

Now we need to position the image in the center of the canvas, for this:
1. In the menu, select `Object` -> `Align and Distribute...`;
2. `Relative to` select `Page`, and click on the alignment icons - horizontally and vertically.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v1ptor8b7ygs2i67cy4c.png)

As a result, we get a picture in the center of the canvas:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1tdwgtnnsh0evyzjgvxm.png)

It remains only to save the result in an `svg` file:
1. Menu `File` -> `Save As...`;
2. Select the format `Plain SVG (*.svg)` and click the `Save` button.

As a result, we got an image in `svg` format with a resolution of `512x512' pixels. All three images have the same resolution.

Now you can start working with `FontForge`:
1. Open the program;
2. Click on the `New` button to create a new project;
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qsd75qcnqhbhw7oik210.png)
3. Select, for example, the letter `s` from the word `smile` and double-click on the empty cell under the letter `s`. The symbol editor should open.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jyahueycw4yb4vmclpzj.png)
4. Open the menu `File` -> `Import...`, `Format` -> `SVG`, select the file `face with a smile` and click `OK`.
5. Close the symbol editor, then under the letter `s` we will see our image with a smile.
6. Repeat the steps for the two remaining pictures, for the `cup` I chose the letter `c`, for `thumbs up` the letter `t`.
As a result, we should have images under the letters `s`, `c` and `t`:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vufm11t7us13vn9g95x3.png)

It remains only to save the result to a font file:
1. Menu `File` -> `Generate Font...`
2. Select the name `icons.ttf` and press the `Generate` button, then `Yes`.

Congratulations, our font is ready!

## 2. Convert our font to `woff` and `woff2` formats
To convert a font from the `ttf` format to `woff` and `woff2`, I wrote a small console utility that you can download from [https://github.com/druxax/font-conv ](https://github.com/druxax/font-conv ).
To install, you need to download and go to the `font-conv` utility directory in the console, then run the commands:
```console
npm pack
sudo npm install -g font-conv-cli-1.0.0.tgz
```
After installation in the console, go to the directory with the font and run the conversion utility:
```console
font-conv-cli
```
After completion, the utility will create a directory in the same folder named `font-conv-res` - it will contain two files of converted fonts with extensions `woff` and `woff2`.
Move all 3 font files to one folder `fonts` and we will proceed to the last point - add the font to the site page.

## 3. Adding the font to the site
Prepare an `html` template for our website, create a file `index.html `.
```html
<!DOCTYPE html>
<html>
   <head>
      <title>Font Excellent</title>
      <link rel="stylesheet" href="styles.css">
   </head>
   <body>
      <h1>Font Excellent</h1>
      <!-- TODO -->
   </body>
</html> 
```
Let's create a file `styles.css` and include our font in it.
```css
@font-face {
   font-family: "Font Excellent";
   src: url("fonts/icons.woff2") format('woff2'),
      url("fonts/icons.woff") format('woff'),
      url("fonts/icons.ttf") format('truetype');
   font-weight: 400;
   font-style: normal;
}
```
Let's add styles for font characters to `styles.css`.
```css
/* General settings for all font characters */
.icon::before {
   display: inline-block;
   font-family: "Font Excellent";
   font-size: 8rem;
   font-weight: 400;
   font-style: normal;
   font-variant: normal;
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
}

/* For a face with a smile */
.icon-smile::before {
   content: "\0073";
}
/* For thumbs up */
.icon-thumbs-up::before {
   content: "\0074";
}
/* For the cup */
.icon-cup::before {
   content: "\0063";
}

/* Color animation and other styles */
body {
   display: flex;
   flex-direction: column;
   align-items: center;
}
.icon {
   margin: 0 1rem;
   animation: color-animation 4s linear infinite;
}
.icon-cup {
   --color-1: #df8453;
   --color-2: #4195b8;
   --color-3: #e4a3a2;
}
.icon-smile {
   --color-1: #dfaf48;
   --color-2: #aed4d0;
   --color-3: #bff2a7;
}
.icon-thumbs-up {
   --color-1: #aed4d0;
   --color-2: #e19c9b;
   --color-3: #a9cfcb;
}
@keyframes color-animation {
   0%    {color: var(--color-1)}
   32%   {color: var(--color-1)}
   33%   {color: var(--color-2)}
   65%   {color: var(--color-2)}
   66%   {color: var(--color-3)}
   99%   {color: var(--color-3)}
   100%  {color: var(--color-1)}
}
```
Here we set the general styles for the `icon` class and specified the content - character encoding for each class of our images `content: "\XXXX"`, where `XXXX` is [CSS Entity](https://www.w3schools.com/cssref/css_entities.asp) value. When creating the font, we chose the letters `c`, `s` and `t` as its symbols, for example, the sign `s` CSS Entity - `0073`. If you click on a symbol in `FontForge`, then you can see the character encoding under the menu bar. For example, by clicking on `t`, its code will be specified as `U+0074`, which means that in `css` we will write: `content: "\0074";`.

We are done with `css`, it remains only to add our images to our `html` template.
```html
<!DOCTYPE html>
<html>
<head>
   <title>Font Excellent</title>
   <link rel="stylesheet" href="styles.css">
</head>
<body>
   <h1>Font Excellent</h1>
   <div>
      <i class="icon icon-cup"></i>
      <i class="icon icon-smile"></i>
      <i class="icon icon-thumbs-up"></i>
   </div>
</body>
</html>
```
Now, by opening the file `index.html ` in the browser, we should see:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kjwry0mzffgwzjczy5af.gif)

Please support me, put likes, subscribe to the blog, write comments.
Thanks for attention.