How to use Adobe Fonts
Tim Jarvis avatar
Written by Tim Jarvis
Updated over a week ago

To use fonts from Adobe you'll need to create a "web project". These are packages containing one or more fonts that are then loaded into your site. The great news is you can create one kit for free - perfect for Fabrik users who don't have an Adobe Creative Cloud membership.

Adobe Fonts

Find a font you wish to use on the Adobe Fonts site. In this tutorial I'm going to start with Prosaic Std.

Click the </> button wherever you see it - which refers to web project, and you'll see an ok box:

Tap OK, and give your web project a name. Select the weights of the fonts you want to include. Remember, the more weights you add, the longer your site will take to load each time a new visitor views it, so we advise that you keep you site to a total of no more than six fonts and weights altogether.

Click Create on the next step - we don't need to copy any code since Fabrik will load your fonts automatically. 

You may reach a summary page like the one above, You'll need to get the font Family name. That's in the highlighted monospace font, next fo font-family. Copy the font family name and paste it into the Fabrik form:

Additionally, from your Web Projects page, copy your unique Project ID.

Adding your Adobe Fonts to Fabrik

Log in to Fabrik and click Customise from the main menu to customise your currently applied theme. Find the font you wish to change (e.g. Header Font) and click the edit button. On the font selector, select Adobe Typekit:


Paste the Project ID into the your font selection in Fabrik. Add a Font Name, You'll see this on the edit screen in Adobe Fonts.


The final step is to make sure you've tapped Save Changes on the Adobe Fonts edit page and then the Use this Font button in Fabrik. You will then see your Adobe Fonts font has been applied within the dashboard:

And finally, make sure you're selecting the weight correctly within Fabrik - to match the weights you've added into your web project. Normal can sometimes be expressed as Regular on Adobe Fonts.

Click Save Changes and view your site to see the results.

Did this answer your question?