Option #1: Using Google Fonts
If you would like your branding font available for selection across your whole site, KLEQ websites support Google fonts. The easiest way is to find the Google Font equivalent for your custom font, submit a request to [email protected] for the font to be added by our team.
NB! Please include a link to the Google Font with your email request.
Option #2: Using Custom Fonts
If you have a specific branding font that is currently not supported by our platform and not available in Google Font, you can add custom fonts to your campaign or course pages by following these steps:
IMPORTANT: Please note that the information below is provided as a courtesy to help you and give you some clarity on what to do. The KLEQ support team cannot help you implement this on your site because they are not designers or programmers. Please consult with your own web designer on how to do this for you.
- Download the font
Find the custom font you want to add to your site and download it. (The file extension will likely be .otf or .ttf)
You can download free Fonts from: fontsquirrel.com, fonts2u, fontpro - Create a WebFont Kit for cross-browsing
Different browsers supports different webfont formats, to add custom font to a website and have them correctly displayed on every browser you have to generate your webfonts. Upload your .ttf or .otf file to the font squirrel Webfont Generator and then download your Web Font Kit. The kit will include .woff and .woff2 files
Font Face Generator - Upload font files to your own hosting server
Once you have generated the webfont files (ttf, otf, woff, woff2) simply upload them to your hosting solution of choice (we recommend Amazon S3) or any other CDN, your server or even another website. - Add your custom font files into the Header section of your KLEQ pages
To add your font on a specific page in your KLEQ site, you will need to add custom css into the header portion of the page.
To do this follow these steps:
+ Open the page you would like to edit.
+ Once opened, click on Page Options in the left sidebar menu.
+ Select the Custom Codes and then you’ll have the Header, Footer and After Body Tag Code.
In the Header section add your custom CSS like this:@font-face {
font-family: “FontName”;
font-style: XXX;
font-weight: XXX;
src: url(https://Yourdomainname/fontfilename.ttf) format(‘ttf’);
src: url(https://Yourdomainname/fontfilename.otf) format(‘otf’);
src: url(https://Yourdomainname/fontfilename.woff) format(‘woff’);
src: url(https://Yourdomainname/fontfilename.woff2) format(‘woff2’);
}#SampleID
{
font-family: FontName !important;
font-weight:normal !important;
font-style:normal !important;
}The first part tells the browser where the web fonts are located, and the second part helps you change the font family of a specific web element.
Please check with your designer/developer if you need help with this.
Once you are done, click on SAVE.
The Fonts on your page should then update to the font added to your page’s Header field.