To upload a custom font to Atomic, first please check that you have the license to use the font (as stated in our Terms). 

To upload a webfont:

  1. Create or select a text area
  2. From the Font dropdown in the right hand properties panel, choose Add fonts
  3. Drag and drop or select the .woff files to upload to your Project

Currently only .woff files are accepted.

If you have a .ttf font file you'd like to use, you can easily convert it to a .woff font file via a woff converter like this one, then upload it to Atomic.

Fonts you upload are available for use in the current prototype and any other prototypes within the same Project. This means that any Collaborators in that Project will also have access to the fonts uploaded.

Anyone who previews the prototype, regardless of whether they have the font installed on their local machine, will be able to see the font.

Missing fonts

If you open a prototype which has custom fonts that you don’t have access to, you’ll have the opportunity to add them yourself. You’ll only be able to replace the font with matching .woff files.

Tip: Make sure the file name matches the name of the missing font.

License information

Please make sure you've properly licensed the webfonts you're using, and that your license allows uploading to Atomic (as stated in our Terms).

Connecting Custom Fonts with Sketch

When using Sketch, the Sketch plugin checks the Atomic project to see if custom fonts are available with the same name. If there are, it automatically does not convert them to an image.

In the future, we plan to support the renaming of fonts uploaded Atomic, so you can make the font names match.

Next →  
Input fields

Related articles:

Did this answer your question?