Link an external font stylesheet to a brand system

External font stylesheets can be linked to a brand system.

Who can use this?

Plans:

  • Brandfolder

Permissions:

  • Admin

Find out if this capability is included in Smartsheet Regions or Smartsheet Gov.

 

This article applies to Content Automation templates, which are different from Brandfolder Custom templates, and CI Hub. 

Your brand may already have your fonts digitally accessible and web-ready via a CDN (Content Delivery Network). In this case, you can simply link the CSS stylesheet that declares and accesses your hosted font(s) into the brand system, ready to use in your templates.

Link your stylesheet

  1. From the typography tab in the brand system, select Edit in the top right-hand corner of the page.
  2. You can either update a declared font in an existing typeface or start from scratch with a new typeface and font list.
  3. Select Add Source on an unlinked font input to open the stylesheet link modal. 
  4. Based on the@font-facefont-family declared in your stylesheet, you can specify which font you want to link in the Name input. If multiple fonts exist, check out the multiple fonts section below.
  5. Click Add Source to finalize the linking process.

Your new font is now linked to your CDN, so anytime you create a template, it is available. 

Stylesheet formatting

When linking an external stylesheet, Brand System expects a publicly accessible CSS file that contains one or more@font-facedeclarations to your fonts. 

Your file should look something like the one below. Please remember, the stylesheet that you link to Brand System will still need to access the fonts you declare in thesrcURLs.

@font-face { font-family: 'Helvetica'; src: url('helvetica-bold.woff2') format('woff2'), url('helvetica-bold.woff') format('woff'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Helvetica'; src: url('helvetica.woff2') format('woff2'), url('helvetica.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Helvetica'; src: url('helvetica-italic.woff2') format('woff2'), url('helvetica-italic.woff') format('woff'); font-weight: normal; font-style: italic; }

Multiple fonts in your stylesheet

If your stylesheet looks like the example below (i.e., multiple@font-facefont-familydeclarations), you have to set up multiple fonts with the same CDN link. This is so that you can correctly create type scales based on your newly linked fonts. 

@font-face { font-family: 'Poppins'; src: url('poppins.woff2') format('woff2'), url('poppins.woff') format('woff'); font-weight: normal; font-style: italic; } @font-face { font-family: 'Helvetica'; src: url('helvetica-bold.woff2') format('woff2'), url('helvetica-bold.woff') format('woff'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Helvetica'; src: url('helvetica-italic.woff2') format('woff2'), url('helvetica-italic.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Helvetica'; src: url('helvetica-italic.woff2') format('woff2'), url('helvetica-italic.woff') format('woff'); font-weight: normal; font-style: italic; }

Other resources