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:
1a. Service 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
Alternatively you will 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: its worthwhile renaming the font files so you know what they are.
Along with your font files its likely that your font service will give you some code in the form of a .css file. You can open that file in TextEdit or Notepad, copy the contents and paste into the Settings > Advanced > HTML Head to load the fonts. When adding css to this area make sure its wrapped in <style></style> tags like example below.
Because you have uploaded them into Fabrik the urls to the font files will have changed so you need to update those URLS by using the copy link button in the files section.
example before:
<style>
@font-face {
font-family: 'Pt Sans';
font-weight: 400;
src: url('/webfonts/pt-sans/regular.woff2') format('woff2'),
url('/webfonts/pt-sans/regular.woff') format('woff');
}
/* more font face code */
</style>
example after:
<style>
@font-face {
font-family: 'Pt Sans';
font-weight: 400;
src: url('https://blob.fabrik.io/12zg/files/pt-sans.woff2') format('woff2'),
url('https://blob.fabrik.io/12zg/files/pt-sans.woff2') format('woff');
}
/* more font face code */
</style>
NOTE: replace the whole https://blob.fabrik.io/12zg/files/pt-sans.woff2 with yours from the copy link button in files seciton, not just the file name.
font-family: is what you will use in Fabrik to reference the font.
font-weight: if all fonts have same family name this is the weight of the font, sometimes you will find the weight is in the name.
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.
Font Family: should match the value provided by your font provider or the font-family set in in your code, example above 'Pt Sans'.
Note that you should only include the font family name - do not include the “font-family:” text.
Finally click the Use this font button and then Save Changes. 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.