In this tutorial we cover how to use custom web fonts that are either self-hosted on your site or hosted by 3rd party services such as Typography and MyFonts. If you're using Google Fonts or Adobe Fonts (Typekit) please view the following tutorials:
1a. 3rd Party Hosted Files
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 or JavaScript code that will load the fonts dynamically. In Fabrik you can add custom code to your pages via the Settings > Advanced > HTML Head or HTML Footer sections.
1b. Self Hosted Files
You should be provided with font files that you need to host. Making sure you have .woff and .woff2 files you can upload those to the Files section in Fabrik here.
Note: if files are not named logically its worthwhile renaming the files so you know what they are and will help system make code for you, e.g. pt-sans-regular.woff, pt-sans-bold.woff
Now you have uploaded them into your Fabrik site files you need to tell the site to load those files. Scroll to bottom of files page and you should see available fonts grouped based on filename.
Click Show CSS for the font you want to use, copy that code, then head to Settings > Advanced and in Head section add that CSS code making sure to add in Internal style tags like below.
Style tags that open and close are very important <style></style>
<style>
@font-face {
font-family: 'Pt Sans';
font-weight: 400;
src: url('https://blob.fabrik.io/db5/files/pt-sans.woff2') format('woff2'),
url('https://blob.fabrik.io/db5/files/pt-sans.woff') format('woff');
}
/* more font codes for other families or weights */
</style>
font-family: is what you will use in Fabrik customise section to reference the font.
font-weight: again is what is used to reference particular weight.
font-style: usually only needed if font is italic
src: this is what we uploaded to files so it can be loaded for your site viewers to use.
2. Using the font
The final step is to configure your theme to use your custom font. Click Customise on the main menu Click the edit button on the font you wish to change:
On the font selector, select the Custom tab and complete the form:
Font Name: is for your own reference so you know what it is, can be anything.
Font Family: Important part should match the value from font-family in your CSS code you added.
Finally click the Use this font button and then Save Changes at bottom of customise page. Go to your Fabrik site, refresh and if everything is correct you should see your new font:
We're here to help
Appreciate this can be a littel overwhelming so if you get stuck, please contact us via the chat (bottom right of your screen) or email us we will be happy to help.