Skip to main content

How to set fonts on your platform

Marie Xhauflair avatar
Written by Marie Xhauflair
Updated today

You can customise the fonts used across your platform to better align with your branding. Fonts can be set for both headings and body text.

There are two main ways to apply fonts:

  • Google fonts (recommended)

  • Custom file fonts

Use Google Fonts (Recommended)

This is the easiest way to add fonts to your platform.

Step-by-step:

  1. Go to Google Fonts

  2. Search and select the font you want to use

  3. Choose the styles (e.g. Regular, Bold)

  4. Select @import and copy the link provided

  5. Go to your platform

    1. Control > Settings > Themes > Fonts box

  6. Paste the link under Heading font URL

  7. Copy the font name into Heading font-family name

  8. Repeat the steps for your body font

💡 Tip:

If you need help choosing, check out this list of popular Google Font alternatives

Use Custom Font Files (Advanced)

If you're using a brand-specific font, you'll need to upload the files manually.

You’ll need:

  • Font files in .ttf, .otf, .woff or .woff2

  • A text editor (like Notepad)

What you'll do:

What you'll do:

  1. Navigate to: Control → Content → Assets

  2. Upload your custom font file(s) (.ttf, .otf, .woff, or .woff2).

  3. In a text editor, paste and edit the provided @font-face template with your font names and URLs:

    @font-face {

    font-family: YOUR HEADING FONT FAMILY NAME;

    src: url(URL TO YOUR HEADING FONT);

    }

    @font-face {

    font-family: YOUR BODY FONT FAMILY NAME;

    src: url(URL TO YOUR BODY FONT);

    }

    Example:

    @font-face {

    font-family: 'Produkt Light';

    src: url('https://lxp.content.qollap.com/media/documents/Produkt-Light-Web.woff');

    }

  4. Save the edited template as a .css file, named after your platform ([YOUR_PLATFORM_NAME].css).

    • ⚠️ Make sure it's saved in CSS format, not as a .txt file.

    • Need help converting? Use this handy converter or any code editor.

  5. Navigate again to Control → Content → Assets and upload the .css file.

  6. Copy the link address of the uploaded CSS file (e.g., https://lxp.content.qollap.com/media/documents/gtsuper.css) and paste it into your platform’s layout settings:

    • Go to Control → Settings → Layout → Fonts

    • Paste the link under Heading font URL and Body font URL.

    • Enter the font family names you used in your CSS file under Heading font-family name and Body font-family name.

  7. Make sure the exact font names match between the CSS file and the layout settings.

Your fonts are now ready to use on your platform!

Did this answer your question?