Import fonts

Brienne Wong
Brienne Wong
  • Updated

This feature is available on all Professional and Enterprise plans. Want this and other premium features? Update your plan here.

zeroheight uses CSS to display font examples from Sketch, Figma etc. in your styleguides (as opposed to images). This means that viewers only see the correct font if:

  • they have it installed – only likely true for other designers on your team
  • you've imported the font into your styleguide – what this help article is about

There are two ways to import fonts into your styleguide: using Google Fonts or using the font URL directly.

1) Open the styleguide settings from the top right ...

three dots menu for styleguide

2) Click on the Import fonts tab

Import fonts section in the Styleguide Settings

Click + Add font to get started

Google Fonts

To import a Google Font:

1) Select your font from the list of Google Fonts

2) Click Save to add the font

3) Save the settings in the bottom right

Add Google Fonts in the settings

You don't need to worry about specifying font weights for Google Fonts – we import all the available weights for your font.

Font URLs

To import a font using its URL:

1) Select Font URL from the leftmost dropdown

2) Specify the font family – this needs to match the family in the font examples in your styleguide

3) Specify a font URL ending in .woff2, .ttf, etc. – more on this below

4) Specify the font-weight that the font URL corresponds to – this is because font files often correspond to a single weight

5) Click Save to add the font

6) Save the settings in the bottom right

The Font name has to be the same as it appears in zeroheight typography design upload blocks.


Add imported fonts in the settings

Quick tip

If you're using Font URLs, here's a workaround for making the body text bold:

1) Click Add font

2) Under Family, copy and paste the name of the font you use for regular text

3) Under URL, paste in the font URL for the font you use for bold text

4) Under Weight, use the font weight that you have for the bold text (you can modify the weight)

5) Click Save

6) Your body text will appear bold

Bolding fonts workaround

Finding font URLs

Most font API services will give you a URL for the CSS file that defines the font so that you can then use it directly in your application's CSS, instead of having to write it yourself. These look like the screenshot below, but that's not the URL you need to import into your zeroheight styleguide!

What you need is the URL of the actual font file (which is a binary file, not a CSS file). You can find these URLs inside the CSS files mentioned above. These usually end in standard font file extensions e.g. .ttf, .woff2, .woff and so on. The font URL is the one highlighted in the screenshot below – that's the one you need to paste into zeroheight to import your font:

font file example

Typekit URLs

Some Typekit / Adobe Font URLs don't end in a typical font extension – they are obfuscated behind an API call (see example below). But don't worry – you can still use these in zeroheight even if they don't end in .woff2 etc.

The URL you need for an Adobe font is in a .css. To find this CSS file, add your font to your web project. You will see a link to the CSS file once added:

typekit and adobe font URLs

Open this link and then you will find a web page with font details and you will need to copy and paste the src:url like in the example below into zeroheight styleguide settings.

src:url example


How do I resolve the CORS error message when adding a font?

Cross Origin Resources Sharing (CORS) is not something we enable on our end, it's a feature that will need to be enabled by your IT team on your servers where the font is hosted.

How do I upload fonts without using a server?

We recommend hosting fonts on your own server in order to upload into zeroheight. As a workaround, you can first host your fonts on Dropbox and convert the font to a .otf format.  Replace the in the default share link with ' Then, you will paste the modified URL in your zeroheight fonts uploads.

Is it possible to add a fallback font as a backup in case of any issues?

Unfortunately, this wouldn't be possible at the moment, however, it may be a feature we'll look into in the future.

Was this article helpful?