Skip to main content
All CollectionsWebsites
How To Use Custom Fonts On Your Website Or Funnel
How To Use Custom Fonts On Your Website Or Funnel

How to use custom fonts on the Ivorey website or funnel builder - code snippet included!

Grace avatar
Written by Grace
Updated over 2 weeks ago

  1. Choose Your Font:

    • Google fonts are already available to use inside any website or funnel, but you can also add custom fonts with a simple piece of code. Don't worry, you only need to add this once!

    • If using a custom font, ensure you’ve purchased the font and have a license to use it.

  2. Upload Your Font:

    • Go to the Media Library in your IVOREY account.

    • Create a folder called “Fonts” and upload your font file in .woff2 format. Whoever you purchased the font from, would have sent you the font files and it typically includes a file in this format.

    • Use a free converter if your file isn’t in .woff2 by simply searching "Free Font Converter" in Google.

  3. Copy the Font URL:

    • Once you have the .woff2 file, from the main menu of Ivorey, go to your "Media Library" and upload the font file.

    • Then, click the three little dots on your file and copy the URL that it gives you.

  4. Add the Code:

    • Next, go into the page of any website or funnel you want the custom font in, and select "Custom CSS" from the icon up the top. Paste the following code into the Custom CSS section:

      Replace 'FONT NAME' with whatever you want to name your font (we suggest choosing just one simple word) and then replace 'FONT URL' with the URL you grabbed from your font in the media library.

    @font-face { font-family: 'FONT NAME';
    src: url('FONT URL') format('woff2');
    /* Regular font */
    }

    .FONT NAME {
    font-family: 'FONT NAME' !important;
    font-weight: normal;
    font-style: normal;
    }

  5. Apply the Font:

    • To apply that custom font to specific parts of your page, click on any text element in your funnel.

    • On the right hand side panel, go to the Advanced Settings tab and type in your font name in the bottom text box. You should see your font instantly switch to the custom font.

  6. Reuse Your Work:

    • In order to continue using the font across all of your funnel or website, simply duplicate your pages to carry over your custom fonts, header, footer, and other settings. Now your custom font is ready to use across all your pages!

Did this answer your question?