How to display fontawesome icomoon and font icons on a Windows 10 with blocked untrusted fonts

Windows 10 has a mode to disable font-loading from external sources, such as emails when the font has to be fetched outside of the installed fonts. This feature is meant to prevent from attacks coming from untrusted fonts.

The icons in our UI are made with a font file. We used icomoon, but if Windows 10 is set up with the same set similar to projects like fontawesome. We use custom fonts with icomoon.

However, this brings problems with displaying our UI in Firefox and IE11.

How can we solve this problem? The Microsoft recommended way it is to either install the font in the system or whitelist the application that needs that font.

We thought of three ways, at least initially:

  • Install the font
  • Use an SVG file
  • Propose the customer to whitelist the browser to let them use our app. This is the last option as it would make the setting less secure.

Install the font in the system

The font to be installed in the system has to match the name in the TTF generated. In our CSS it’s called “Textbox Icons”, however in the generated TTF it is called “textboxIcons”. I could not find a way to rename the font name with a space in Icomoon, therefore I used a tool for that: fonttools.
It is a python tool and it requires python 2.7 or 3.4 to be used. It can be installed with pip:

pip install fonttools

At this point the tool can be used through the command line:

ttx fontFile.ttf

This will generate a fontFile.ttx file, which we can open with a text editor and we can edit for our purposes.

Looking for the name of the font? Open the file and search for it. You’ll find a section name with all the names assigned to the font.
Simply replace the name with the new one and you’ll be good to go.


  <name>
    <namerecord nameID="1" platformID="1" platEncID="0" langID="0x0" unicode="True">
      Font Name
    </namerecord>
    <namerecord nameID="2" platformID="1" platEncID="0" langID="0x0" unicode="True">
      normal
    </namerecord>
    <namerecord nameID="3" platformID="1" platEncID="0" langID="0x0" unicode="True">
      Font Name
    </namerecord>
    <namerecord nameID="4" platformID="1" platEncID="0" langID="0x0" unicode="True">
      Font Name
    </namerecord>
    <namerecord nameID="5" platformID="1" platEncID="0" langID="0x0" unicode="True">
      Version 1.1
    </namerecord>
    <namerecord nameID="6" platformID="1" platEncID="0" langID="0x0" unicode="True">
      Font Name
    </namerecord>
    <namerecord nameID="10" platformID="1" platEncID="0" langID="0x0" unicode="True">
      Font name
    </namerecord>
    <namerecord nameID="1" platformID="3" platEncID="1" langID="0x409">
      Font Name
    </namerecord>
    <namerecord nameID="2" platformID="3" platEncID="1" langID="0x409">
      normal
    </namerecord>
    <namerecord nameID="3" platformID="3" platEncID="1" langID="0x409">
      Font Name
    </namerecord>
    <namerecord nameID="4" platformID="3" platEncID="1" langID="0x409">
      Font Name
    </namerecord>
    <namerecord nameID="5" platformID="3" platEncID="1" langID="0x409">
      Version 1.1
    </namerecord>
    <namerecord nameID="6" platformID="3" platEncID="1" langID="0x409">
      Font Name
    </namerecord>
    <namerecord nameID="10" platformID="3" platEncID="1" langID="0x409">
      Font name
    </namerecord>
  </name>

Running back

ttx fontFile.ttx

it will generate a new font file with the updated name that you can install.

After installation in Windows 10 still doesn’t work

In Firefox, even after the installation, the font did not work fine. How can this problem be fixed? In the installed fonts I could see my file, however, I could not see the font being displayed correctly in the system.
Opening the event log in Window I have noticed that the font was still being downloaded. At this point what I had to do it was to provide an alternative font to be used. Which one? Mine of course!


@font-face {
  font-family: 'Font Name';
  src: url("fontname.woff");
  font-weight: normal;
  font-style: normal;
}

And the icon font family:


.icon-class:before,
.icon-class:after {
  font-family: 'Textbox Icons', 'textboxIcons';
  font-size: 100%;
  display: inline-block;
}

Everything else stays the same:


.icon-check:before {
  content: "\e276";
}

And that’s it! We can display our font based icons in an application even with secure Windows 10 Enterprise.