In this tutorial we cover how to use custom web fonts that are either self-hosted or provided by services such as Fontdeck and Fonts.com. If you're using Google Fonts or Adobe Typekit please view the following tutorials:

How to use Google Fonts
How to use Abobe Typekit Fonts

A little history

For a long time web sites were limited to using "system fonts"; fonts that are pre-installed on your computer.

Since not all computers come with the same set of fonts installed, if you wanted the type on your web site to look the same for all your visitors you would need to choose a "web safe" font - a font that did exist on most computers, for example, Arial.

In recent years, through the advances in web technologies and browsers it's been possible to "import" web fonts that do not exist on the user's computer. This has opened up a whole new world for typography on the web and has resulted in web font services such as Google Fonts and Adobe Typekit that make it easy for you to use custom fonts in your web sites.

How it works

Most font services work in a similar way. You choose the font(s) that you want to use and are provided with some code that you need to add to your web page. This is either a link to a stylesheet that contains references to the fonts or JavaScript code that will load the fonts dynamically. In Fabrik you can add custom code to your pages via the HTML Head Content and HTML Footer Content sections on the Advanced Settings page.

The second step is to configure your theme to use your custom fonts by using the Custom option within the fonts selector.

Using Fonts.com

In this example we’ll look at how to use fonts from Fonts.com. I’ve decided I want to use Proxima Nova Light for all the text on my Fabrik site.

When you’ve found the font you wish to use you need to create a Web Project. Follow the instructions on the site to do this, then go to Manage Projects:

Click Add & Edit Domains and add your Fabrik site domain in addition to any custom domains you may have configured:

Once done click the publish link to publish your web font project. Click Publish Options, then Option 2: CSS and copy the provided HTML code:

Next log into Fabrik and go to Settings > Advanced. Paste the code you copied in the previous step into the HTML Head Content section:

The final step is to configure your theme to use your custom font. Click Customise on the main menu to customise your currently selected theme. Click the edit button on the font you wish to change:

On the font selector, select the Custom tab and complete the form:

The Font Name is for your own reference. Font Family should match the value provided at the bottom of the publish options popup on Fonts.com:

Note that you should only include the font family name - do not include the “font-family:” text.

Finally click the Use this font button in Fabrik and save your changes. Then go to your Fabrik site to witness your beautiful custom fonts in all their glory: