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');
}
Got an issue? Or want to submit feedback?
Submit your feedback

Our new Feedback and Issue Tracker is built on GitHub Issues. Just leave your comment below and you can track our team resolve it, or browse issues others have already submitted.

Read how to use the Feedback and Issue Tracker