07024 – How to add Custom Fonts to your 10XPRO site

Option #1: Using Google Fonts

If you would like your branding font available for selection across your whole site, 10XPRO.io 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 10XPRO.io 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 10XPRO.io pages
    To add your font on a specific page in your 10XPRO 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 open, click on Page Options in the left sidebar menu.Scroll down and open the Header, Footer and After Body Tag Code toggle.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 CHANGES.

The Fonts on your page should then update to the font added to your page’s Header field.

Related Article

How to set up your CORS settings