Overview

In addition to adding fonts from the Google, Adobe, and Hoefler foundries, you can also upload font files via the Font Manager. 

There are a couple requirements you need to follow in order to be able to upload fonts:

  • Only .woff / .woff2 (“Web Open Font Format”) files are supported. 
  • You must also upload an accompanying CSS file. This provides critical information about whether the fonts should be grouped together into a family. (This is explained more fully below, with some examples.)

How to Upload Fonts

From the Font Manager, select “Add More Fonts” from the top-right. Then scroll down to the option for “Custom Font Upload”:

Click “Upload Fonts” and you’ll be provided with a drag-and-drop interface where you can upload a folder of your fonts, which will be automatically added to Brandcast:

Your folder must contain both the font files you want to add, and a CSS file.

File Formats

The font files that you upload must be in .woff or .woff2 format. 

.woff is the most widely-supported format. We don’t require .woff2 files, but as that is the newer .woff format, we do support them. You can upload one type or both (recommended); you’ll just need to adjust your CSS depending on what you decide.

Formatting the CSS

The CSS file that you include is necessary to tell Brandcast whether the font files you are uploading should treated as separate fonts, or grouped together as variations of a single font. 

Variations would be things like an italicized or bolded version of the font, or different weights. Modern fonts often provide you with completely separate files for each of these variations. Your CSS file will specify how they are meant to be grouped together. 

Your CSS must be formatted in the manner described in this article. If you have CSS that was provided to you by a font foundry, you may need to reformat or rewrite it.

Adding a Single Font

The name of your font, the files that comprise it, and the style it represents are all captured in CSS as a @font-face statement. If you’re uploading a single font with no variations, then this statement will be quite simple:

 

@font-face {
          font-family: 'Chunk';
          src: url('ChunkFive-Regular.woff') format('woff'), url('ChunkFive-Regular.woff2') format('woff2');
          font-style: normal;
}

Note that in this example, we are adding a single font named “Chunk”, which has both .woff and .woff2 files, and the style is set to normal.

Adding a Single Font with Variations

If we were uploading a single font that had three different variations, representing three different weights – a normal weight, a light weight, and a bold weight – then we’d use additional @font-face statements, one for each file:

 

@font-face {
          font-family: 'Junction';
          src: url('junction-regular.woff') format('woff');
          font-style: normal;
}

@font-face {
          font-family: 'Junction';
          src: url('junction-light.woff') format('woff');
          font-weight: 300;
          font-style: normal;
}

@font-face {
          font-family: 'Junction';
          src: url('junction-bold.woff') format('woff');
          font-weight: 700;
          font-style: normal;
}

 

Note that the font-family property of the @font-face definitions is the same for all three. This tells Brandcast that all three files should be treated as variations of the same font (“Junction”), which will appear as a single option when styling your text in the Brandcast design studio.

Adding Multiple Fonts

In contrast, if you wanted to upload multiple fonts and ensure they remain distinct options in the Text Formatting panel, you can assign a different name to each one. This font, for example, has two very different looks:

 

/* Blackout Midnight */

@font-face {
          font-family: 'Blackout Midnight';
          src: url('blackout_midnight-webfont.woff') format('woff');
          font-style: normal;
}

/* Blackout Sunrise */

@font-face {
          font-family: 'Blackout Sunrise'; src:
          url('blackout_sunrise-webfont.woff') format('woff');
          font-style: normal;
}

 

In this example, both “Blackout Midnight” or “Blackout Sunrise” will appear as different options in the Font Manager and the Text Formatting Panel. This is because we’ve given each @font-face definition  its own discrete font-family name.

Adding Multiple Fonts with Variations

Here’s a final, more complex example! This webfont that has a few styles that we want to represent as distinct fonts in Brandcast, and some of those style have multiple weights and/or styles.

 

/* Ostrich Sans */

@font-face {
          font-family: 'Ostrich Sans';
          src: url('ostrich-sans-black.woff') format('woff');
          font-weight: 900;
          font-style: normal;
}

@font-face {
          font-family: 'Ostrich Sans';
          src: url('ostrich-sans-bold.woff') format('woff');
          font-weight: 700;
          font-style: normal;
}

@font-face {
          font-family: 'Ostrich Sans';
          src: url('ostrich-sans-regular.woff') format('woff');
          font-style: normal;
}

/* Ostrich Sans Dashed */

@font-face {
          font-family: 'Ostrich Sans Dashed';
          src: url('ostrich-sans-dashed.woff') format('woff');
          font-weight: 500;
          font-style: normal;
}

/* Ostrich Sans Rounded */

@font-face {
          font-family: 'Ostrich Sans Rounded';
          src: url('ostrich-sans-rounded.woff') format('woff');
          font-weight: 500;
          font-style: normal;
}

/* Ostrich Sans Inline */

@font-face {
          font-family: 'Ostrich Sans Inline';
          src: url('ostrich-sans-inline-regular.woff') format('woff');
          font-style: normal;
}

@font-face {
          font-family: 'Ostrich Sans Inline';
          src: url('ostrich-sans-inline-italic.woff') format('woff');
          font-style: italic;
}

 

 

Did this answer your question?