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 only need one of these file types, you do NOT need to use both.
You must also upload an accompanying CSS file. The CSS file should be in plain text format, with a
.cssfile extension. The CSS file provides critical information about whether the fonts should be grouped together into a family, among other things. (This is explained more fully below, with some examples.)
Note: this article is intended for users who are comfortable with writing their own CSS code. If this is something that you don't feel comfortable doing, please contact our Customer Support team for assistance.
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 TIME Sites:
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.
Formatting the CSS
The CSS file that you include is necessary to tell TIME Sites 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 bold 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.
To create the CSS file, follow these easy steps:
Open the text editor of your choice that has the ability to write in plain text (ie. TextEdit, Note Pad)
Copy the example code below that best suits your needs (Adding a single font, adding a single font with variations, adding multiple fonts, or adding multiple fonts with variations)
Change the example font name and font file name to be your font name and font file. If you have more or fewer files than what's in the example, you can either duplicate or remove @font-face sections.
Make sure your file is plain text, and then save it as a .css (make sure that the file shows the extension .css)
Place your new .css file in a folder along with all your .woff or .woff2 files and it's ready to upload!
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');
font-style: normal;
}
Note that in this example, we are adding a single font named “Chunk”, which has a .woff file, 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 TIME Sites 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 TIME Sites 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 web font that has a few styles that we want to represent as distinct fonts in TIME Sites, 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;
}