Kickpages has 50 Google fonts included that can be used in each text snippet in the editor, but sometimes you might want to use a different custom Google font in your pages. Adding a custom Google font can be really easy and can be done in multiple ways, will show you the easiest way now. (if you would like to use a custom/paid font file, then please follow this tutorial: https://help.kickpages.com/article/153-using-a-custom-font-file)
First off, search and select your desired font in the Google font library at https://fonts.google.com and click on "Select this style"
In the right side of the page a new panel will appear (if not then you can click the small icon in top right with three squares):
Copy the CSS include code that is displayed:
Go to your Kickpages editor and add the copied code to the "Code for Head Tag" section:
You will need to use custom classes in order to display your text with the desired font type that is described in detail here: https://help.kickpages.com/article/105-using-custom-css-to-style-your-pages
You will need a custom class definition for this to, in this example, I'm gonna use the "fjalla" class which is the font name to prevent confusion if using multiple classes for multiple custom fonts. Below the CSS include code from Google fonts, we can define our CSS as follows:
The custom CSS we are adding is:
<style>
.fjalla, .fjalla p, .fjalla span, .fjalla strong{
font-family: 'Fjalla One', sans-serif !important;
}
</style>
If you would like to use a different class instead of "fjalla" you can use whatever, just replace all four instances in the code above to the desired custom class name. In the second line of the CSS code above, you need to define the font you are including, in this case is font-family: 'Fjalla One', sans-serif !important; You can get this line from the Google font library from where you have copied the CSS include code and add "!important" to the end of it:
Please note that this is unique for each font type in the Google font library, so you will need to use the correct CSS code as displayed.
With this your custom Google font is included and your custom class is defined, so you just need to assign the class to the desired element inside the Kickpages Editor in the "Custom classes" section:
Please note, that the custom font might be not displayed in the editor itself, but will be shown correctly in the preview and in the final published page.
If you have any questions or issues while adding custom Google fonts then please let us know and we can help you out at any time.