Adding Adobe Fonts

Use the Font Manager to add fonts that you've licensed from Adobe (Typekit) to your TIME Sites websites.

Alex Piepenbrink avatar
Written by Alex Piepenbrink
Updated over a week ago

The Font Manager provides an easy way to preview and add additional fonts to the website you're currently working with, or to your TIME Sites account overall.

Open your Adobe account

To add custom fonts from Adobe, you'll need an Adobe Fonts account and a paid license for the specific fonts you want to use. Adobe Fonts will provide you with a code snippet for the font you want to add.


First, login to your Adobe account. Once you've logged in, find the font you'd like to add to your website and click on "Add to Web Project"

In the next popup, click on "Show X more" if applicable, and check all the variations available. If you do not select the additional variations, they will not be available for you to use in TIME Sites.

Next, click on the drop down at the top, and select "Create a new project"

Name your project, and click "Create" at the bottom.

Adobe will now give you a line of code. Copy this line of code.

Open the Font Manager

Once you've obtained your code snippet from Adobe, open the Font Manager from the "Window" menu, or by pressing shift-F on your keyboard:

Adding Adobe Fonts

At the top-right of the Font Manager UI, you'll see a selector that gives you the option of adding the Adobe Font only for the website you're currently working on, or adding it as a default on your TIME Sites account:

The website fonts are the fonts that are currently available on the specific website you're working with.

The account fonts are the fonts that will be automatically available to any new websites created in this account.  Adding your font to this list of defaults can save you the trouble of having to add the same Adobe font each time to every new website that you create.

Once you've selected a destination, click the "Add More Fonts" button at the top of the Font Manager UI:

You'll see a text input that allows you to add your code snippet in directly. Paste it in and click the "Submit" button.

You'll see the font appear in the list of currently active fonts, on the right-hand side of the Font Manager. This font is now available for use, and can be applied to text via your Global Styles or via the Text Formatting Panel as usual.

Browsing Adobe Fonts

Once you've added an Adobe Font to a site, or to your account defaults, you'll see that "Adobe Fonts" is now available as an option in the font foundry selector at the top of the Font Manager:

Selecting "Adobe Fonts" whenever you're in the Font Manager will display all the fonts that you've added from this foundry. From here, you can activate or deactivate them whenever you want.

Activating an Adobe Font

Any font in the Font Manager can be activated via the "Add Font" button in the preview:

This will make it available for use on your website, and you'll be able to apply it to text as normal via Global Styles or the Text Formatting Panel. 

Deactivating an Adobe Font

To deactivate an Adobe font, you can toggle the font to "inactive" in the font preview, or click "Edit List" on the list of active fonts:

If you deactivate a font that is currently being used by text on the site, that text will automatically switch to the fallback default for that font. The fallback is defined by Adobe Fonts and will typically be a generic "serif" or "sans-serif". 

If you deactivate a font from the account-level defaults, any existing websites that use this font will not be affected. This action will only make the Adobe font unavailable to new websites that are created in the account from this point onwards.

Did this answer your question?