Overview

Use this article to understand where custom fonts come from, how Shorthand can load them, and which setup option to choose.

If you have a custom branded theme, Shorthand can add your licensed web fonts to the theme so they’re available across your stories. If you only need the fonts in one story, and your plan includes custom code and development features, you can add them in the story’s CSS panel using a hosted font URL or hosted font files.

Key benefits / use cases

Use brand fonts in a Shorthand story when your plan supports custom code for brand consistency
Add fonts from a font service such as Google Fonts or Adobe Fonts
Use self-hosted fonts by defining the font files with @font-face

Choose the best way to add custom fonts

Method	Best for	What happens
Custom branded theme	Teams that want brand fonts available across stories.	Send Shorthand the licensed web font files or font service details. Shorthand can add the fonts through your custom branded theme.
@import in custom CSS	A story-level font from a service URL, such as Google Fonts or Adobe Fonts.	You add an @import line and a small CSS rule in the story CSS panel.
@font-face in custom CSS	A story-level font where you already have hosted font file URLs.	You add one @font-face rule for each font file and style.

Tip: If your team has a custom branded theme and wants to reuse the same fonts in multiple stories, adding the fonts to the theme is usually cleaner than adding story-level CSS each time.

Option 1 - Custom Branded Theme

Custom branded themes are created by the Shorthand design team according to your brand guidelines and specifications. If your team has a custom branded theme, Shorthand can add brand fonts to that theme so the fonts are available from the editor.

Send Shorthand the font details

Provide licensed web fonts in WOFF format where possible.
Include all font weights and styles you want available in the theme.
If your fonts are provided by a service such as Adobe Fonts or Google Fonts, provide the font service details or URL.
If you have the web font files, send the files to Shorthand so they can be added through your custom branded theme.

Note: Other font types, such as .ttf or .otf, are usually not licensed for web use and may not display correctly in all browsers.

Option 2 - Using an import

Step 1 - If you are using Adobe Fonts (formerly known as Typekit), Google Fonts, or another font service that provides fonts in the form of a URL, then paste that URL at the very top of the CSS panel (it must be before any other non-@import CSS) inside an @import statement in this format like this:

@import url("https://font-source-url-here.css");

Note: Do not include HTML like <link> or <style> tags when adding CSS to the CSS panel.

For instance, with Google Fonts, once you have selected the fonts you wish to use, select "Get embed code" and choose the @import option...

...and copy the code between <style> and </style>, then paste that into the top of the CSS panel, and ensure that you add a semi-colon to the end of the import line if Google doesn't include it, like so:

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

For Adobe Fonts, the URL can be obtained from the embed code they provide, and the final result will look something like this:

@import url("https://use.typekit.net/abcdefg.css");

Step 2 - For each of the fonts sourced from the @import URL, you also need to define the font-family inside a CSS rule, for example:

.my-font {
  font-family: "Roboto", sans-serif; 
}

Here we've created a CSS rule with a class selector of .my-font but you can use any unique name and it doesn't need to match an actual class or element in the page. The most important thing is adding the font-family to a CSS rule as it effectively activates the font in the font selector menu.

Option 3 - Using @font-face

If you are hosting your own fonts, or need to give a unique name to a font hosted somewhere outside of your control, you can use @font-face CSS rules to define your font like so:

@font-face { 
  font-family: "My Font"; 
  src: url(https://www.font-domain.com/myfont.woff) format("woff"); 
  font-weight: normal; 
  font-style: normal; 
}
@font-face { 
  font-family: "My Font"; 
  src: url(https://www.font-domain.com/myfont-italic.woff) format("woff"); 
  font-weight: normal; 
  font-style: italic; 
}
@font-face { 
  font-family: "My Font"; 
  src: url(https://www.font-domain.com/myfont-bold.woff) format("woff"); 
  font-weight: bold; 
  font-style: normal; 
}
@font-face { 
  font-family: "My Font"; 
  src: url(https://www.font-domain.com/myfont-bolditalic.woff) format("woff"); 
  font-weight: bold; 
  font-style: italic; 
}

Note: Due to a current system limitation, the font-family names cannot include numbers surrounded by spaces, so if you do want to include numbers you must remove surrounding spaces or use hyphens, or spell the numbers out, for instance, use "My Font-2" or "My Font Two" instead of "My Font 2".

Be aware that depending on the settings of the server on which your fonts are hosted you may run into CORS issues which you would need to take up with your IT department.

Using the fonts in your story

If you have used either of the above methods successfully you will find the custom fonts are now available in the font menu in the Shorthand editor:

FAQs

Do custom fonts need to be hosted somewhere?

Yes. Custom fonts need to be available from a hosted source before Shorthand can load them. The hosted source can be a font service, your own hosted font files, or fonts added through a Shorthand custom branded theme.

Can Shorthand host font files for us?

If you have a custom branded theme, you can send Shorthand the licensed web font files so the fonts can be added through your theme.

Which font formats should I send?

Provide licensed web fonts in WOFF format where possible, and include all weights and styles you want to use.

Can I add fonts without a custom branded theme?

Yes, if your plan includes custom code and development features. You can add a story-level font with @import or @font-face in the CSS panel.

Why does an imported font need a CSS rule?

An imported font needs a font-family inside a CSS rule because that activates the font in the Shorthand editor font menu.

What should I do if hosted fonts trigger CORS issues?

If hosted fonts trigger CORS issues with fonts hosted outside Shorthand, contact your IT department because CORS depends on the settings of the server that hosts the font files.

Adding additional fonts