We recently updated the font customisation options in Fabrik making it easier to use custom web fonts in your Fabrik sites. Part of this update was an improved integration with Adobe Typekit, a subscription font service that makes quality fonts from the world's best foundries available to the web.
To use fonts from Adobe Typekit you need to create a "kit". 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.
Typekit requires you to configure the domains that have access to your kits. You can get these from the typekit form in 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:
At the bottom of the form copy the list of domains.
Now you need to find a font you wish to use on the Adobe Typekit site. In this tutorial I'm going to use Museo Slab:
Click the Use fonts button, select the Web tab and then click create a new kit.
Give your kit a name and paste the list of domains you copied in the previous step:
Click Continue on the next step - we don't need to copy any code since Fabrik will load your fonts automatically. On the kit editor page, click Embed Code at the top of the page and copy the Typekit Kit ID:
Paste this into the typekit form within Fabrik and give your font a name (this is for your own reference):
You also need to get the font family name. Usually this is just the name of the font but to be sure, click the Using fonts in CSS link (top right) on the Adobe Typekit editor, copy the font family name and paste it into the Fabrik form:
The complete Typekit form in Fabrik should look something like this:
The final step is to click the Publish button on the Typekit editor page and then the Use this Font button in Fabrik. You will then see your Typekit font has been applied within the dashboard:
Click Save Changes and view your site to see the results.
