Linking an External Font Stylesheet to a Brand System

Important Note: 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 Brand System, ready to use in your templates.

Linking your first stylesheet

1. From the Typography tab in Brand System click Edit in the top right hand corner of the page.
2. We can either update a declared font in an existing Typeface or we can start from scratch with a new Typeface and fonts list.
3. Click Add Source on an unlinked font input to open the stylesheet link modal. 
4. Grab the link to your publicly accessible CSS stylesheet and drop it in the Font CDN link input. 
5. Based on the@font-facefont-family's declared in your stylesheet, you will be able to specify which font you want to link in the Name input. If multiple exist, check out the multiple fonts section below.
6. Click Add Source to finalize the linking process.

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

What should my stylesheet look like?

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 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; 
}

What if I have multiple fonts in my stylesheet?

If your stylesheet looks like the example below (i.e. multiple@font-facefont-familydeclarations) you will have to setup multiple fonts with the same CDN link. This is so that you can correctly create type scales based on your newly linked fonts. To see what this looks like in action, check out the video below. 

@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

• MDN Web Docs: @font-face
• Digital Ocean: How To Define Custom Fonts in CSS with @font-face and font-display