DEV Community

Andrey Smirnov
Andrey Smirnov

Posted on • Edited on

How to make your own Font Awesome font

#fontawesome #font #css #svg

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:

Thumbs up
It is enough to write a small HTML code, and the picture will be on our website:

<i class="fa-solid fa-thumbs-up"></i>
Enter fullscreen mode Exit fullscreen mode

But why we can't just place a picture using the img tag?

<img src="/thumbs-up.svg" />
Enter fullscreen mode Exit fullscreen mode

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 , but this complicates the readability and support of the code.
There is another method to change the color of the image - add inline svg:

<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>
Enter fullscreen mode Exit fullscreen mode

The fill attribute is responsible for the color. But the easiest way is to change the color is the css styles:

.icon {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

Additionally, svg images can be packaged into React components, and image sprites can be created, among other things. Please leave a comment if you are interested in an article covering these topics.

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:

Download and install these programs, as well as download three images in svg format, from which we will make our font:

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. As a result, we will get a saucer and a cup handle protruding beyond the margins of the canvas:

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. Result:

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.

As a result, we get a picture in the center of the canvas:

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;
  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.
  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:

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 .
To install, you need to download and go to the font-conv utility directory in the console, then run the commands:

npm pack
sudo npm install -g font-conv-cli-1.0.0.tgz
Enter fullscreen mode Exit fullscreen mode

After installation in the console, go to the directory with the font and run the conversion utility:

font-conv-cli
Enter fullscreen mode Exit fullscreen mode

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.

<!DOCTYPE html>
<html>
  <head>
    <title>Font Excellent</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Font Excellent</h1>
    <!-- TODO -->
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Let's create a file styles.css and include our font in it.

@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;
}
Enter fullscreen mode Exit fullscreen mode

Let's add styles for font characters to styles.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) }
}
Enter fullscreen mode Exit fullscreen mode

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 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.

<!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>
Enter fullscreen mode Exit fullscreen mode

Now, by opening the file index.html in the browser, we should see:

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

Top comments (2)

Collapse
 
andrewbaisden profile image
Andrew Baisden • • Edited

Great tutorial.

Collapse
 
andreyen profile image
Andrey Smirnov •

Only 94 people saw this post, please share it with your audience if you can.