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
You can copy/paste this code into the CSS files on your website.
Uploading individual font weights as separate files.
Some fonts come as a series of indivual font files. You can specify the roles of each of these in the CSS area.
Here 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;
}
@font-face {
font-family: "DroidSerif";
src: url("../fonts/DroidSerif-Italic-webfont.ttf") format("truetype");
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: "DroidSerif";
src: url("../fonts/DroidSerif-Bold-webfont.ttf") format("truetype");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "DroidSerif";
src: url("../fonts/DroidSerif-BoldItalic-webfont.ttf")
format("truetype");
font-weight: bold;
font-style: italic;
}
Where to add your fonts to the stylesheet
You can add your custom font rules to the content.css stylesheet located at DESIGN > Custom Design > Stylesheets button
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 // Text Name*/
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;
}
If using additional Variable Font parameters such as width.
If your variable font has additional options such as width, you can specify these in the font CSS rules.
In the example below, the font Pliant, which has both weight and width parameters is loaded into the stylesheet, has additional CSS rules to set the width of the fonts and with weights for the headings.
@font-face{
font-family: "Pliant";
src: url('../fonts/Pliant-VariableFont_wdth_wght.ttf');
}
body{
font-variation-settings: "wght" 300, "wdth" 105;
}
h1,h2{
font-variation-settings: "wght" 650, "wdth" 108;
line-height:1;
}
h3,h4{
font-variation-settings: "wght" 550, "wdth" 108;
}
b.strong{
font-variation-settings: "wght" 650;
}