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
To have the font render into the CMS you need to upload the fonts to your /css/ folder ----> /css/WorkSans-VariableFont_wght.ttf
As your font is located in the same folder as your stylesheet - your @fontface rule would then be linked as per the example src: url(WorkSans-VariableFont_wght.ttf)
To keep things tidy you might want to create a subfolder e.g. /css/fonts/WorkSans-VariableFont_wght.ttf
your @fontface rule would then be linked via src: url(fonts/WorkSans-VariableFont_wght.ttf)
Adding your fonts to the stylesheet
To add the fonts uploaded to the droidserif fonts to a 'DroidSerif' font-family.
@font-face {font-family: "DroidSerif";
src: url("DroidSerif-Regular-webfont.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "DroidSerif";
src: url("DroidSerif-Italic-webfont.ttf") format("truetype");
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: "DroidSerif";
src: url("DroidSerif-Bold-webfont.ttf") format("truetype");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "DroidSerif";
src: url("DroidSerif-BoldItalic-webfont.ttf")
format("truetype");
font-weight: bold;
font-style: italic;
}
Example Usage
In the DESIGN > COLOURS AND FONTS area
font-family:"DroidSerif", Georgia, serif
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 /css/ directory on the hosting account.
@font-face {
font-family: 'worksans';
src: url(WorkSans-VariableFont_wght.ttf) format("truetype-variations");
font-weight: 1 999;
}
@font-face {
font-family: 'robotoslab';
src: url(RobotoSlab-VariableFont_wght.ttf)format("truetype-variations");
font-weight: 1 999;
}