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.

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:

Note: Since Typekit became Adobe Fonts, you no longer need to add domains to your web project's settings.

Now you need to find a font you wish to use on the Adobe Fonts site. In this tutorial I'm going to use 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 below, in which case, tap Edit Project to reach your unique Project ID.

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

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

You also need to get the font Family name. That's in the monospace font, next fo font-family. Copy the font family name and paste it into the Fabrik form:


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?