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 pātene
• 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.

@font-face { 
 font-family: "DroidSerif"; 
 src: url("../fonts/DroidSerif-Regular-webfont.ttf") format("truetype");
 font-weight: normal;
 font-style: normal;
} 

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;

}