Sometimes you might want to use a custom font file, that is not available as a hosted version in Google Fonts or any other CDN, these are usually paid fonts, available in font files only. (If you would like to use a Google font then please follow this tutorial: https://help.kickpages.com/article/151-using-custom-google-fonts)
When using a custom font file, you can't upload it to Kickpages, you will need to have your own web server from where you can include your font files. You will need to create a CSS file which includes the fonts, then include the CSS file into your page at Kickpages, then you can use custom classes as described here.
In this example I will show two different fonts, which come in different formats, all the fonts are uploaded to https://example.com/font/ and the stylesheet.css file is uploaded to the same directory where the font files, no extra directories are used
One font is called "ArgentCF" which comes in all modern font file formats, and the other font is called "Cera Pro" and comes only in the regular .otf file format.
The CSS file i have created can be seen here: https://pastebin.com/MDAuBejE
The first three font face declaration as you can see are for "ArgentCF", this basically includes the different font files as fallback fonts if a device or browser can't handle any of the other font files. the second batch of three declarations, includes "Cera Pro" in the regular .otf file format.
Until this, it is all regular font inclusion using CSS, but for Kickpages, you will need to create custom classes to use later in the editor for the different elements. The first custom class looks like:
.Argent-CF-Regular, .Argent-CF-Regular p, .Argent-CF-Regular span, .Argent-CF-Regular strong{
font-family: 'Argent CF' !important;
font-weight: normal;
font-style: normal;
}
In the example above, our custom class is called " Argent-CF-Regular" and it is defined for the class itself, then the p, span and strong elements inside our custom class, the first lines defines the font family to use for our custom class, and since the font file is already designed as regular weight and style, we just use normal display for both. Please note that you can use any custom class, but when using a lot of custom classes for fonts, it is easier to just name the custom class as the font itself, to keep track and do not mess it up later. Also please note that we use "!important" for the font family definition, which will overwrite the font family set by the editor itself.
When you are done with all font files and custom classes for each of them and you have them added to your stylesheet.css file, you can include the CSS file into the editor to use it. You can include the CSS file with the following code:
<link rel="stylesheet" href="https://example.com/font/stylesheet.css">
Obviously, you have to rewrite the path to your own domain and directory, and you can add the code to your "Code for Head Tag" block in the page settings:
When the CSS file is included, you can edit an element and add the custom class to display it using the custom font we just defined:
Please note that the custom fonts will not be displayed in the editor, but will be shown in the preview and in the final published page. We do understand that using custom font files might be not ideal for beginner users, a bit of CSS knowledge will help a lot, but if you have any issues or questions, or you get stuck, then please contact us and let us know.