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

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;

}