Using Fontello to Only Load Icon Fonts That You Need

Share this article

Fontello in newspaper clipping letters

It is commonplace to see icon fonts used for a range of simple graphical elements around the web, from the display of social media icons inside sharing buttons on a website to a speech bubble icon that tells readers about the number of comments on an article.

There are a number of features that make icon fonts so useful. Firstly, unlike regular images, font icons have no pixelation on high-resolution screens. They can scale up as much as needed without blurriness. Secondly, a lot of their properties can be controlled directly using CSS. You can change their size and color, or apply text-shadows with a few lines of CSS. They are also much easier to use than image sprites.

Before getting too deep into icon fonts, if you are starting a new web design from scratch, keep in mind that using SVG images might be a better approach. We’ve explored a comparison of the two approaches here at SitePoint in the past. SVG images have some clear advantages, for example, you can create multi-color icons and your SVG images can also look sharper than icon fonts. On the other hand, if your project needs to support legacy browsers or your team has not yet taken the step of changing its workflow to accommodate SVG icons, it is worth looking into ways in which it’s possible to optimize the use of icon fonts at least.

If you have worked with icon fonts before, you have most probably used or heard about Font Awesome. In version 4.7, Font Awesome provides 675 different icons for users to use in their projects. The icons provided by this font range from Facebook and Twitter icons to objects like a bathtub and thermometer. The only problem? You won’t probably use all 675 icons in a single project. Loading the whole font file just to use about 10 or 20 icons increases the page load time unnecessarily. This issue is not specific to just Font Awesome but most icon fonts in general.

In this tutorial, you will learn about Fontello. It is a great service that is free to use and allows you to create icon fonts from vector images. You can also combine icons from multiple open source projects like Font Awesome, Entypo and Typicons in a single file.

Creating a Font Using Built-in Icons

The first step in creating your own font is selecting all the icons that you need from the Fontello homepage. Let’s say you want to use font icons with social media buttons. You can start by selecting icons for Facebook, Twitter, Pinterest and LinkedIn.

Once you have selected all the icons, you can click on the “Customize Names” tab to change the name of icons. For example, the Facebook icon has the name icon-facebook but you can change it to icon-fb if you wish.

The prefix icon- can also be changed by clicking on the settings button.

Finding the CSS prefix option in Fontello

After changing the names, you can also change the codes for each of these icons. Do you see the “social-media” written in top right corner in the above image? This is the name that will be used while generating your font files.

Once you are satisfied with the icons and their names, you can click on the download webfont button to download the fonts.

Using the Created Font in Your Projects

You can extract the download zip file to start using the icons. Upon extraction, you should see two folders named “css” and “fonts”. There should also be a “config.json” file. This file contains all the configuration information of your fonts. If you want to make changes to an existing project, you can directly drag this file to the Fontello page or import it by going to Settings > Import.

To use the icons, you should copy all the files to your own project directory. Make sure that you keep the folder structure intact. This will simplify the process of making any changes to the font in future.

You can then include the “social-media.css” file in your project. The icons can be used on your webpage by adding <i class="icon-classname"></i> to the markup. Here, icon-classname is the name of the icon you want to show.

Using Custom Images to Create the Font

Fontello has a lot of icons for you to choose from. There are icons for different kind of weather, social sites, graphs and much more. However, it is still possible that the icon you are looking for is not offered by any of the icon fonts.

You can import custom fonts and images to Fontello in SVG format. If your font is in TTF / OTF or WOFF format, you can convert it to SVG using tools like FontForge.

When importing SVG images, you need to make a few changes to your SVG for it to be converted properly. You will have to remove all the fills and colors from it. Similarly, there should not be any complex rules like the evenodd fills. You also need to remove FAT line attributes and join all contours to a single outline. This page describes the process of preparing images for import in more detail.

How Significant are the Improvements?

Using Fontello can reduce page weight significantly. If you are using Font Awesome version 4.7, the font file loaded by the browser is about 75kb in size. However, the font file created with Fontello was only 4kb in size in my case.

Here are the icons that I used:

See the Pen Fontello Icon Fonts by SitePoint (@SitePoint) on CodePen.

Of course, the gains may vary depending on how many icons you need to load. I was loading eight different icons and the gain was about 70kb. In certain situations, a website might be loading two different font files to load weather and social media icons. If they don’t have to use all the weather and social icons, they can use Fontello to combine the fonts in a single file. In addition to reducing page weight, they will also be reducing the number of requests made by the browser.

Besides the performance gains, the service also allows you to give a uniform name to your icons. For example, Font Awesome prefixes fa- to all its icons. Other icon fonts might do the same. If you are using multiple icon fonts, you will have to keep track of different prefixes. With Fontello, you can assign a single prefix of your own choice to all the icons.

If you just want to use a selection of font icons from the built-in ones available on Fontello, the process of creating a custom icon font is very simple. It will only take 10 to 15 minutes and the gains are worth the effort.

Additional Details

If you are uploading the font files that you created on a separate domain, you will have to make sure that the server responds with proper CORS headers. This can be done by adding the following lines in your .htaccess

<FilesMatch ".(eot|ttf|otf|woff|woff2)">
  Header set Access-Control-Allow-Origin "*"

If you have to upload files on a different domain and can’t set the CORS headers either, you can embed the font files directly into the CSS. Fontello already creates such a file for you when you download the generated font. All you have to do is include it in your projects.

You can also set the right mime-type for all the font files by adding the following lines to your .htaccess file —

AddType application/x-font-ttf           ttc ttf
AddType application/x-font-otf           otf
AddType application/font-woff            woff
AddType application/font-woff2           woff2
AddType application/    eot

If you know a good icon font, you can suggest it to Fontello for them to include in their list of fonts on the Homepage. However, the font should meet specific requirements. It should have an acceptable open source license. The icons should look good at small sizes. Additionally, the font should have at least 40 icons in its set.

The last requirement will probably be lifted in future when the process of adding fonts becomes fully automated. You can read more about the process here.


In this tutorial, you learned how to use Fontello to create custom icon fonts for your projects. If you think that reducing the page weight by about 70kb is not worth the trouble, keep in mind that these saving along with other such optimizations can quickly add up to reduce the page weight significantly.

Are there any other services similar to Fontello that you use to load custom icon fonts? Do you have any tips for the readers? Let us know in the comments.

Frequently Asked Questions (FAQs) about Using Fontello

What is Fontello and why should I use it?

Fontello is a tool that allows you to pick custom vector icons and compile them into web fonts. It’s a great resource for web developers because it helps to reduce the size of your website’s files, which can significantly improve loading times. Instead of loading an entire font library, you can select only the icons you need, which makes your website more efficient. Fontello also offers a wide range of icons, giving you plenty of options to choose from.

How do I install Fontello on my website?

Installing Fontello on your website is a straightforward process. First, you need to visit the Fontello website and select the icons you want to use. Once you’ve made your selection, you can download the font pack. This pack contains the font files and a CSS file. You need to upload these files to your website’s server. Then, you can link the CSS file in your HTML document, and you’re ready to start using the icons.

How do I use Fontello icons in my HTML code?

Once you’ve installed Fontello, using the icons in your HTML code is simple. Each icon has a unique class name, which you can find in the CSS file included in the font pack. To use an icon, you just need to add a span or i element with the class name of the icon. For example, if the class name of the icon is ‘icon-heart’, you would use the following code: <i class="icon-heart"></i>.

Can I use Fontello with React?

Yes, you can use Fontello with React. You need to install the font pack on your website as usual. Then, you can use the icons in your React components by adding a span or i element with the class name of the icon. Remember to use the ‘className’ attribute instead of ‘class’, as ‘class’ is a reserved word in JavaScript.

How do I customize the size and color of Fontello icons?

You can customize the size and color of Fontello icons using CSS. The size of the icons can be adjusted by changing the font-size property, and the color can be changed by adjusting the color property. For example, to make an icon larger and red, you could use the following code: .icon-heart { font-size: 2em; color: red; }.

Can I use Fontello icons in my CSS code?

Yes, you can use Fontello icons in your CSS code. You can add an icon to an element by using the ‘content’ property and the icon’s Unicode. The Unicode of each icon can be found in the CSS file included in the font pack. For example, to add an icon to a button, you could use the following code: .button:before { content: '\e800'; }.

How do I add new icons to my Fontello font pack?

If you want to add new icons to your Fontello font pack, you need to visit the Fontello website and select the new icons. Then, you can download the updated font pack and replace the old files on your server. Remember to update the CSS file in your HTML document if it has changed.

Can I use Fontello with WordPress?

Yes, you can use Fontello with WordPress. You need to install the font pack on your website as usual. Then, you can use the icons in your WordPress theme by adding a span or i element with the class name of the icon in your PHP files.

How do I use Fontello with Bootstrap?

You can use Fontello with Bootstrap in the same way as with any other website. You need to install the font pack on your website and link the CSS file in your HTML document. Then, you can use the icons in your Bootstrap components by adding a span or i element with the class name of the icon.

What should I do if my Fontello icons are not displaying correctly?

If your Fontello icons are not displaying correctly, there could be several reasons. First, make sure you’ve uploaded all the font files to your server and linked the CSS file correctly in your HTML document. Also, check that you’re using the correct class names in your HTML code. If the icons are still not displaying, there could be a conflict with other CSS styles on your website. Try adding the ‘!important’ rule to your icon styles to override any conflicting styles.

Asha LaxmiAsha Laxmi
View Author

Asha is a front-end developer and instructor who enjoys working with new and interesting JavaScript libraries. She also likes to travel and she reads a lot of books in her free time.

font iconspatrickcweb fontswebfonts
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week