Set up icon font libraries

Site Studio allows you to manage the Icon font libraries to use on your website. It also provides an icon browser (shown below) to make it easy to find and add icons to your website styles. 

Icon fonts are not images. They cannot be added to content like an image. They are a type of font and can only be used as content within styles on the pseudo elements :before and :after. If you want to add an icon as page content, use the image element and upload a .png.

Should I upload or import my Icon fonts?

When adding Icon fonts to your website settings you have the choice to 'Upload' or 'Import' your icon fonts. If you upload your icon fonts, they will be hosted on your web server along with your website pages and files. If you import your Icon fonts they will be hosted on Icomoon or another host.

The choice of whether to Upload (self host) or Import (host elsewhere) is dependent on your website traffic levels, your website user geographical locations and other factors that influence the performance (speed) of Icon font serving. Icomoon provides two CDN options for serving icon fonts, both of which will provide high performance icon serving.

Icon fonts files and file format requirements

When adding icon fonts there are two items you require:

1. A .zip file containing your icon font in EOT, SVG, TTF, WOFF, WOFF2 formats
2. A JSON file which provides an index of the icons in the icon font. This is required by the Icon picker to display the icons.

Supported icon font generators and JSON formats

A simple way to create your icon font, including JSON file, is to use one of these popular icon font generators:

• Icomoon - Generates icon fonts with JSON files and also provides icon font hosting. Find our more about getting started with Icomoon here.
• Fontello - Generates icon fonts with JSON file. Find out more about getting started with Fontello here.

Site Studio supports the JSON format provided by Icomoon and Fontello. If you want to use an icon font generated by something else you must create your JSON file in this format.

Icon font hosting options

You have two options when using icon fonts.

1. Upload to the website - The icon font will be served directly by your website
2. Import from a URL - The icon font is served from a different host like AWS or an icon font host provider like Icomoon

Uploading icon fonts in the Icomoon format

Icomoon is a popular icon font generator and icon font hosting provider. Find out more about Icomoon here. 

To upload an Icon font in the Icomoon format:

1. Navigate to Site Studio > Website settings > Icon libraries
2. Within Icon fonts, click on Upload Icomoon icon font button 
3. A new row of fields is added and you should see that Icomoon is displayed in a field. This is the font family
4. Click the Upload.zip button and browse to your .zip file containing your icon font. This should include your icon font in EOT, SVG, TTF, WOFF, WOFF2 formats. Successfully uploaded font files will be marked with a green tick
5. Enter a name in the Label field
6. Click Upload JSON and select your JSON file. You can download this from Icomoon. It provides an index of your icons and is required by the Icon picker. Find more information on getting started with Icomoon
7. Click Save.

Uploading icon fonts in the Fontello format

Fontello is a popular icon font generator. It does not provide Icon font hosting. Find out more about Fontello here.

To upload an Icon font in the Fontello format:

1. Navigate to Site Studio > Website settings > Icon libraries
2. Within Icon fonts, click on the Blue button arrow and select Upload Fontello icon font
3. A new row of fields is added and you should see that fontello is displayed in a field. This is the font family
4. Click the Upload.zip button and browse to your .zip file containing your icon font. This should include your icon font in EOT, SVG, TTF, WOFF, WOFF2 formats. Successfully uploaded font files will be marked with a green tick
5. Enter a name in the Label field
6. Click Upload JSON and select your JSON file. You can download this from the Fontello website. It provides an index of your icons and is required by the Icon picker. Find more information on getting started with Fontello
7. Click Save

Uploading icon fonts in a custom format

If you do not want to use Icomoon or Fontello you can upload your own icon font and provide a JSON file for the icon picker. 

To upload an Icon font in a custom Format:

1. Navigate to Site Studio > Website settings > Icon libraries
2. Within Icon fonts, click on the Blue button arrow and select Upload custom icon font
3. A new row of fields is added 
4. Click the Upload.zip button and browse to your .zip file containing your icon font. This should include your icon font in EOT, SVG, TTF, WOFF, WOFF2 formats. Successfully uploaded font files will be marked with a green tick
5. Enter a name in the Label field
6. Enter your font family in the Font family field. This must match the name of the font family you have uploaded
7. Click Upload JSON and select your JSON file. This must be in this format
8. Click Save

Importing web icon fonts using Icomoon

Icomoon provides a premium service where they will manage the hosting of your icon font on Amazon S3 or CloudFront. If using this service, all you have to do is add the URL of the hosted font and upload the JSON file they provide. Find out more about Icomoon here. 

To import an icon font from Icomoon:

1. Navigate to Site Studio > Website settings > Icon libraries
2. Within Icon fonts, click on Import Icomoon icon font button 
3. Enter a name in the Label field. We recommend including 'Icomoon' in the label so you know that it's an Icomoon font in the future
4. Enter the URL of where the icon font is hosted in the @import field. If using Icomoon to host your font, this is provided by them
5. Click Upload JSON and select your JSON file. You can download this from Icomoon. It provides an index of your icons and is required by the Icon picker
6. Click Save.

Importing web icon fonts using Fontello

To import an icon font from Fontello:

1. Navigate to Site Studio > Website settings > Icon libraries
2. Within Icon fonts, click on the Blue button arrow and select Import Fontello icon font
3. A new row of fields will appear
4. Enter a name in the Label field. We recommend including 'Fontello' in the label so you know that it's a Fontello font in the future
5. Enter the URL of where the icon font is hosted in the @import field
6. Click Upload JSON and select your JSON file. You can download this from Fontello. It provides an index of your icons and is required by the Icon picker
7. Click Save

Importing web icon fonts in a custom format

If you do not want to use Icomoon or Fontello you can import your own icon font and provide a JSON file for the icon picker. 

To import an Icon font in a Custom Format:

1. Navigate to Site Studio > Website settings > Icon libraries
2. Within Icon fonts, click on the Blue button arrow and select Import Custom icon font
3. A new row of fields will appear
4. Enter a name in the Label field
5. Enter the URL of where the icon font is hosted in the @import field
6. Click Upload JSON and select your JSON file. This must be in this format
7. Click Save