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.

Important

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.

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.

Important

Should I upload or import my Icon fonts?

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:

A .zip file containing your icon font in EOT, SVG, TTF, WOFF, WOFF2 formats
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.

Upload to the website - The icon font will be served directly by your website
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:

Navigate to Site Studio > Website settings > Icon libraries
Within Icon fonts, click on Upload Icomoon icon font button
A new row of fields is added and you should see that Icomoon is displayed in a field. This is the font family
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
Enter a name in the Label field
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
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:

Navigate to Site Studio > Website settings > Icon libraries
Within Icon fonts, click on the Blue button arrow and select Upload Fontello icon font
A new row of fields is added and you should see that fontello is displayed in a field. This is the font family
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
Enter a name in the Label field
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
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:

Navigate to Site Studio > Website settings > Icon libraries
Within Icon fonts, click on the Blue button arrow and select Upload custom icon font
A new row of fields is added
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
Enter a name in the Label field
Enter your font family in the Font family field. This must match the name of the font family you have uploaded
Click Upload JSON and select your JSON file. This must be in this format
Click Save

Importing web icon fonts using Icomoon

Important

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:

Navigate to Site Studio > Website settings > Icon libraries
Within Icon fonts, click on Import Icomoon icon font button
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
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
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
Click Save.

Importing web icon fonts using Fontello

To import an icon font from Fontello:

Navigate to Site Studio > Website settings > Icon libraries
Within Icon fonts, click on the Blue button arrow and select Import Fontello icon font
A new row of fields will appear
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
Enter the URL of where the icon font is hosted in the @import field
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
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:

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

Did not find what you were looking for?

If this content did not answer your questions, try searching or contacting our support team for further assistance.

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.

Important

Should I upload or import my Icon fonts?

A .zip file containing your icon font in EOT, SVG, TTF, WOFF, WOFF2 formats
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.

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.

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

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

Navigate to Site Studio > Website settings > Icon libraries
Within Icon fonts, click on Upload Icomoon icon font button
A new row of fields is added and you should see that Icomoon is displayed in a field. This is the font family
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
Enter a name in the Label field
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
Click Save.

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

Navigate to Site Studio > Website settings > Icon libraries
Within Icon fonts, click on the Blue button arrow and select Upload Fontello icon font
A new row of fields is added and you should see that fontello is displayed in a field. This is the font family
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
Enter a name in the Label field
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
Click Save

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.

Navigate to Site Studio > Website settings > Icon libraries
Within Icon fonts, click on the Blue button arrow and select Upload custom icon font
A new row of fields is added
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
Enter a name in the Label field
Enter your font family in the Font family field. This must match the name of the font family you have uploaded
Click Upload JSON and select your JSON file. This must be in this format
Click Save

Important

Navigate to Site Studio > Website settings > Icon libraries
Within Icon fonts, click on Import Icomoon icon font button
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
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
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
Click Save.

Navigate to Site Studio > Website settings > Icon libraries
Within Icon fonts, click on the Blue button arrow and select Import Fontello icon font
A new row of fields will appear
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
Enter the URL of where the icon font is hosted in the @import field
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
Click Save

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.

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

Did not find what you were looking for?

If this content did not answer your questions, try searching or contacting our support team for further assistance.