Fonts with Anima

This article will explain how Anima handles varying fonts.

Michal avatar
Written by Michal
Updated over a week ago

✅ Google Fonts

If your website uses a Google Font (for example Roboto), our system will automatically detect it and add an @import  of the font URL to the CSS file.

✅ Mac OS Fonts

If your website is using a native Mac OS font (for example Avenir), then we are not able to automatically upload the Mac OS font file and link it via CSS.

✅ Custom Fonts

You can upload your custom font to Anima after syncing your design using our Missing Font feature that appears at the top of the Anima web app once you've synced your design.

Here is how:

Font Licenses

If you do have a license to the font, then either you received the web font version of these fonts, or you received a link to them accompanied with a snippet of @import code.

For the font to work for all visitors, place the @import  snippet under Custom HTML tags in the ⚙️ Anima Project's settings > Public Link > SEO Settings > under Analytics:

Custom Font Fallbacks (Sketch Only)

If you do not have a license for the font, visitors to your site that have the font installed on their computer will see the website just as you see it. Others, for example, visitors with Windows, will see the fallback fonts

Our default font fallback order is:

<Your Font>, Helvetica, Arial, Serif

You can customize the font fallback order (on Sketch only).


Please keep in mind that different browsers and operating systems may render some fonts differently than what you see in your browser and operating system.

Get involved in our Anima Community Forum!

New to Anima?

Learn More

Did this answer your question?