Import fonts

Brienne Wong
Brienne Wong
  • Updated

This feature is available on all Professional and Enterprise plans.

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 ...

Screen Shot 2022-08-17 at 1.32.05 PM.png

2) Click on the Import fonts tab

Screen Shot 2022-08-17 at 3.54.27 PM.png

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

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

 👉 Note: The Font name has to be the same as it appears in zeroheight text style design upload blocks.

 

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:

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:

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.

FAQS

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 www.dropbox.com in the default share link with 'dl.dropboxusercontent.com 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?