Export Icon Font through Metro Studio

Icon Font can be exported only through a project. To know how to create a project, click here.

Convert into Font

Metro Studio ExportFontIcon Image18

  • The newly created project will be shown in the right corner of the Project segment area.
  • Hover over it, and you will see three actions buttons sliding over the project i.e. Edit, Create Font and Explore.
  • Click the Metro Studio ExportFontIcon Image1 create font appbar icon.

  • This generates all the icons in the project into font, and can be previewed in the font editor window.

Metro Studio ExportFontIcon Image2


By default, the icons are assigned to a series of PUA (Private Use Area), starting from e900 and icon name. You can change the PUA and icon name by clicking the consecutive texts. The icon name is part of the class name, followed by the suffix given by you in the CSS setting. We will go through this later in the document.

Metro Studio ExportFontIcon Image3

Character Mapping

Using reset app bar icon, you can switch and reset mapping either to PUA or glyph mapping.

Metro Studio ExportFontIcon Image5


When you reset the mapping to glyph, the icons will be assigned to 128 basic Latin characters (52 Latin characters and 76 common characters) starting from Latin characters followed by common characters. If the number of icons are more than 128, then the first 128 icons are mapped to glyph, and the rest of the icons are mapped to PUA.


To view and edit the basic CSS properties, click Metro Studio ExportFontIcon Image6 ,the CSS app bar icon.

In CSS properties, you can:

  • Set prefix and postfix for the class.
  • Choose the CSS selector.

Metro Studio ExportFontIcon Image7

Class name for a glyph would be class prefix, followed by icon name or icon name followed by class postfix.


If you edit the name of the icon, name it appropriately so that you can easily refer it from CSS.

For example:

Metro Studio ExportFontIcon Image8


Once done with the settings, click the generate icon font Metro Studio ExportFontIcon Image9. A popup appears, where you can choose the location and assign the font name of the icon.

Metro Studio ExportFontIcon Image10

How to use Icon Font

A project folder is exported to the chosen location. In the folder, you will find the following files. You can use Icon Font by installing the font file or by using HTML and CSS.

Metro Studio ExportFontIcon Image11

In the fonts folder, you will find TTF (True Type font file), WOFF, EOT and SVG file formats.
Metro Studio ExportFontIcon Image19

Using HTML and CSS

In the embed font in the CSS folder, you will find the HTML and CSS files.

Metro Studio ExportFontIcon Image12

In style, the TTF font is embedded by using Base64 conversion. You can explore the code in the CSS file.

Metro Studio ExportFontIcon Image13


This CSS file is enough to generate the Icon Font in the browser. There is no need to refer to the TTF, WOFF, EOT, or SVG files.

Run the demo HTML through any browser like Mozilla, Chrome, IE, etc.
Metro Studio ExportFontIcon Image14

Without Embedded Font in CSS

Metro Studio ExportFontIcon Image15

In the style CSS (present in the project folder), we have referred the TTF, WOFF, EOT and SVG font by using SRC property.

Metro Studio ExportFontIcon Image16

Run the demo HTML file in the project folder. You will get the same output as base 64 conversion.

Metro Studio ExportFontIcon Image17