Fonts 

Your font is typically defined in your organisation’s brand guidelines.

Font face

Add font face

  1. Name the new font family you want to import, e.g. ‘Open Sans Bold’
  2. Choose a font style or leave as ‘Normal’
  3. Choose a font weight or leave as ‘Normal’
  4. You can then choose from 4 file types to add the font file
  5. Select ‘Add File’ to view files on your local drive and upload
  6. Select the font file, e.g. ‘OpenSans-Bold.ttf’
  7. Select ‘Submit’
  8. The file name should display next to the ‘Choose File’ button
  9. Scroll down to the ‘Add another item’ to repeat and add another font file
  10. 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

Import font face

  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

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.

Font family

Now choose a text style for your site and link it to your font faces:

1. Add a CSS selector to column one, e.g.

p paragraph
body body
h1 Heading one
h3, h4 Heading three and four
.breadcrumb <div class=”breadcrumb”>

2. Other selectors for less common text elements can be identified by using inspect element.

3. Add the name of your font family in the second column, e.g. if you uploaded the font face ‘OpenSans-Bold.ttf’ and gave it the CSS font family name ‘Open Sans Bold’, then add this name ‘Open Sans Bold’ to the second column

4. This will link or apply the font face style ‘Open Sans Bold’ to the CSS selector

5. Select ‘Submit’

Export font family

1. Select the ‘Export styles’

Import font family

1. Select ‘Font family import’ tab

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

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

5. Select the font file to add, e.g. ‘intranet_font_family_values.json’

6. Select ‘Upload’

7. You should see the file name displaying next to the ‘Add File’

8. Select ‘Submit’

9. View ‘Font family settings’ tab to check font family has been added 

Remove font family

You can remove a font family from a selector by:

1. Deleting the selector field in column one and font family in column two

2. Select ‘Submit’

 

Font sizes

Change default font sizes for headings

1. Choose heading option from menu, e.g. H1 font-size, H2 font-size, etc.

2. In the dropdown menu, select the point size to replace the default

2. Select ‘Submit’

Font size for specific CSS selectors

1. Add CSS selector, e.g. ‘.pane-latest-comments .pane-title’

2. Choose a point size from the dropdown menu

3. Select ‘Add another item’ to add another CSS selector

4. Select ‘Submit’ 

Export font size settings

1. Select the ‘Export styles’

Import font size settings

1. Select the ‘Font sizes import’ tab.

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

3. Select the ‘Add File’

4. A window will open to view files on your local drive

5. Select the font file you would like to add, e.g. ‘intranet_font_values.json’

6. Select ‘Upload’

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

8. Select the ‘Submit’ button

9. Select ‘Font sizes’ to review

Remove font size

1. Delete the CSS selector field

2. Select ‘Submit’

 

0 Comments