Font face

Summary

Configure font face

*Please note: Your font is typically defined in your organisation’s brand guidelines

 
Steps
  1. Navigate to ‘Administration’ and then select ‘Font face’ option located under ‘Branding’

‘Font face settings’ tab

2. In ‘CSS font family’ field name  the new font family you want to import, e.g. ‘Open Sans Bold’

3. Select ‘CSS font style’:

  • Normal 
  • Italic
  • Oblique

4. Select ‘CSS font weight’:

  • Normal 
  • Bold
  • Bolder
  • Lighter
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900

5. Choose from the following four file types to add the font file

  • Embedded Open Type (EOT) font file – This format is supported by IE 5-8
  • True Type File (TTF) font file – This format is supported by Webkit/Safari 3.1+, Safari Mobile iOS 4.2+, Opera 10+, Mozilla/Firefox 3.5+, and Chrome 4+. It is specially designed for screens
  • Web-Only Font Format (WOFF) font file – This format is supported by IE9+, FF3.6+, Chrome 5+ and uses gzip compression
  • Scalable Vector Graphics (SVG) font file – This is an XML format required by iOS devices before version 4.2. Currently supported by iOS 4.1 and below, and Opera 10+

6. Select ‘Add File’ to view files on your local drive and upload

7. Select the font file, e.g. ‘OpenSans-Bold.ttf’

8. Select ‘Submit’

9. The file name should display next to the ‘Choose File’ button

10. Scroll down to the ‘Add another item’ to repeat and add another font file

11. Once you have added the font files, select ‘Submit’

Remove font face

  1. Select the ‘Remove font’ checkbox below the listed font files
  2. At the bottom of the page, select ‘Remove’
 

Export font face

  1. Select the ‘Export font face’ at the bottom of the page
 

‘Font face import’ tab

  1. Select the ‘Font face import’ tab

2. Import font face by uploading a JSON file from a previous export

3. Select ‘Add File’ to view files on your local drive and upload

4. Select the font face file to add, e.g. ‘‘intranet_font_face_values.json’’

5. Select ‘Upload’

6. The file name will display next to the ‘Add File’

7. Select the ‘Submit’ button

8. View ‘Font face settings’ tab

 
Expected result

The font face has been configured

 
Linking font files to text elements

Once the font face files are added, go to ‘Font family’ in Administration and link the new font styles to your text elements.

 
Roles/permissions

Brand manager