Uploading local font files

If you're looking to use fonts not available on Google Fonts or in the CMS - either from a free font repo or via a webfont purchase - you can upload these to the file system and link them in your spreadsheet.

Example free fonts not available on Google Fonts

Public Sans - via https://public-sans.digital.gov/

Inter - via https://rsms.me/inter/

Metropolis - via https://fontsarena.com/metropolis-by-chris-simpson/

Clarity City - via https://github.com/vmware/clarity-city

Where to upload your font files

• Click the DESIGN button the main menu
• Click the Fonts and Text Colours button in the Colours, Fonts and Styling section.
  
• Find the Upload Font Files section and click the Upload or Manage Font Files button
• Browse and upload font
  

Adding your fonts to the stylesheet

Below is an example of the CSS rules to add the fonts uploaded to the droidserif fonts to a 'DroidSerif' font-family.

If you were to use your own font set, you could look to copy/paste the font rules below, changing the font-family name and filename to what is required (highlighted in BOLD)
The font-family name can be any name you choose as e.g 'example-font, mainfont, Droid Serif' etc.
If you have a space in the name e.g. Droid Serif, the font name will need to be in quotes when you specify it in the DESIGN > FONTS area.

e.g. "Droid Serif", Georgia, serif

You only need to specify @font-face rules for the fonts you have so if you have a normal font and a bold font you would need the two rules that use those. i.e. the first one and the third one in the list below.

Adding your fonts to the stylesheet

You can add your custom font rules to the content.css stylesheet located at DESIGN > Custom Design > Stylesheets button, or click the CSS button located in the leff-hand quicklinks sidebar

Example Usage

If setting the font in the DESIGN > COLOURS AND FONTS area

You can enter the name of the font, plus any fallback fonts separated by a comma e.g. "DroidSerif", Georgia, serif
(The fontname only needs to be in commas if there is a space in the name, otherwise optional)

If setting the font  in the stylesheet or custom style areas

body { font-family:"DroidSerif", Georgia, serif; } 

 h1 { font-weight:bold; or font-weight:700; if using numeric values} 

 em { font-style:italic; } 

 strong em { font-weight:bold; font-style:italic; }

Standard font Weight Values

Traditionally font weights have a value from 100 - 900 as shown below. Newer variable fonts allow for ranges up to 1-999

Font Weight Values

/* Numeric keyword values */ 

font-weight: 100; 

font-weight: 200; //thin

font-weight: 300; //light

font-weight: 400;// normal 

font-weight: 500; //medium

font-weight: 600; //semibold

font-weight: 700;// bold 

font-weight: 800; //extrabold

font-weight: 900; //black

Variable Fonts

Variable fonts are an evolution of the OpenType font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. They let you access all the variations contained in a given font file via CSS and a single @font-face reference. Learn more from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide

Variable Font example

Work sans https://fonts.google.com/specimen/Work+Sans is an example of a variable font where you can link one font file - WorkSans-Italic-VariableFont_wght.ttf 

It contains all the font-weight info from lightest (1) to Heaviest (999). The font files are available for download, including static files that can be used on your PC.

The CSS font-rule to add to your stylesheet can be found below assuming you have uploaded the font-file to your /fonts/ directory on the hosting account.

@font-face {  

font-family: 'worksans';  

src: url(../fonts/WorkSans-VariableFont_wght.ttf) format("truetype-variations");  

font-weight: 1 999;

}

@font-face {  

font-family: 'robotoslab';  

src: url(../fonts/RobotoSlab-VariableFont_wght.ttf)format("truetype-variations");  

font-weight: 1 999;

}