Fonts

To change the font-family there are 3 steps.

1. Customizing the Paper font base

Go to your custom-theme.html located under /SpacesLocal/Global/Components/custom-theme/custom-theme.html and look for the :root within the <style is="custom-style"> tag.

Add or modify the --paper-font-common-base definition by adding a font-family as shown below:

--paper-font-common-base: {
            font-family: 'YOURFONT', 'Arial', sans-serif;
        }

2. Uploading the font

Now add your font to the /SpacesLocal/Global/Components/custom-theme/YOURFONT folder. A web-safe font should come in as many of the following formats as possible: eot, svg, ttf, woff and woff2.

3. Importing the font

The last step is to import the font files into your CSS stylesheet. To do that please go to /SpacesLocal/Global/Components/custom-theme/override.css and add the following lines:

@font-face {
  font-family: 'YOURFONT';
  src: url('YOURFONT/font-name.eot');
  src: url('YOURFONT/font-name.eot?#iefix') format('embedded-opentype'),
       url('YOURFONT/font-name.woff2') format('woff2'),
       url('YOURFONT/font-name.woff') format('woff'),
       url('YOURFONT/font-name.ttf') format('truetype'),
       url('YOURFONT/font-name.svg') format('svg');
}

You can repeat this process for different weights and font-styles by adding the following attributes to your @font-face and varying the the font-name each time.

font-style: 
font-weight:

To define a seperate font for extra light weights for example you could add:

@font-face {
  font-family: 'YOURFONT';
  font-style: normal;
  font-weight: 100;
  src: url('YOURFONT/font-name-extralight.eot');
  src: url('YOURFONT/font-name-extralight.eot?#iefix') format('embedded-opentype'),
       url('YOURFONT/font-name-extralight.woff2') format('woff2'),
       url('YOURFONT/font-name-extralight.woff') format('woff'),
       url('YOURFONT/font-name-extralight.ttf') format('truetype'),
       url('YOURFONT/font-name-extralight.svg#extralight') format('svg');
}

Last updated: Wed 18 Oct, 2017