All Collections
Settings
Layout
Self-service styling and fonts
Self-service styling and fonts

How to set fonts for your platform

Silvia Pagliaro avatar
Written by Silvia Pagliaro
Updated over a week ago

When setting up the styling for your platform, you can specify what fonts to use for body and heading texts.

There are two options:

  1. The easiest way to approach this is to use google fonts (or another font website like it),

  2. You can also add custom font files.

1. Use Google fonts

You can find the closest google font alternatives to your client's fonts here: https://frontendresource.com/most-used-fonts-alternative-google-fonts/.
To use google fonts for your platform:

Step 1. Go to https://fonts.google.com/.

Step 2. Find the fonts that are most suitable for the styling you are setting up.

Step 3. Select the font style you need for the heading texts.

Step 4. Select '@Import' and copy the link highlighted in the screenshot.

Step 5. Go to Control > Settings > Layout > Fonts and paste the link under Heading font URL.

Step 5. Copy the highlighted text in the screenshot to your platform's layout settings under Heading font-family name.

Step 7. Repeat the process for the body font and your platform styling is ready to go.

💡 Tip: If you're looking for a simple solution, adding google fonts is an easier way.

2. Use custom font files

If your platform really requires custom fonts to be used, here's how to do it through self-service styling. Please note that the fonts should be provided either as direct urls to the files, or as files in one of the following formats: .ttf, .otf, .woff or .woff2.
​
​If you have a link to the font files, skip steps 4 to 8

Step 1. Go to the Content Builder associated to your platform.

Step 2. Login

Step 3. Go to "Documents" from the menu on the left

Step 4. Upload a new file using the button on the top right

Step 5. Select the font file that you want to use as Heading font.

Step 6. Select the right collection (usually your platform's CB name)

Step 7. Upload the file

Step 8. Repeat steps 5 to 7 for your Body font.

Alternatively, you can now also upload the font file in Control --> Content --> Assets.

Step 9. Open a text editor (e.g. block notes)

Step 10. Paste this template

@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);
}

Step 11. Edit the template in your text editor adding the names for your fonts and the URL to your font files.

  • If you uploaded files to the CB, then:

    • Look for them under "Documents"

    • Open the document. You should be in a page like the one in the screenshot below.

    • Copy the link address of the text in green.

    • Paste it in your text editor where you need it.

    • Change the url where you pasted it from

      'yourCBurl/documents/####/fontFileName' to 'yourCBurl/media/documents/fontFileName'.

      So for example this link 'https://lxp.content.qollap.com/documents/8221/Produkt-Light-Web.woff' becomes 'https://lxp.content.qollap.com/media/documents/Produkt-Light-Web.woff'.

    • Notice that 'media' is added in the link and the numbers are taken off.

    • Repeat the process for all the font files you uploaded.

    • You should have a file that looks like this:

@font-face {
    font-family:Produkt Light;
    src: url(https://lxp.content.qollap.com/media/documents/Produkt-Light-Web.woff);
}
@font-face {
    font-family: Produkt Super;
    src: url(https://lxp.content.qollap.com/media/documents/Produkt-Super-Web.woff);
}

  • If you had direct urls to your font files:

    • Paste the links in the text editor where you need them.

    • You should have a file that looks like this:

@font-face { 
    font-family: GT Super; 
    src: url(https://assets.ctfassets.net/ozc5on9ss4ee/2Jn8E6JV5VXGBZwoxWjcG/fe0a44853c6082f6ccde1adff891fde8/GTSuperWTBetav5-Super.woff2);
} 

@font-face { 
    font-family: GT Super Regular; 
    src: url(https://assets.ctfassets.net/ozc5on9ss4ee/6wJnFsbWU1IhR5NUStMM/4b79cdaeebfb458c0630d8a4d54d90f3/gt-super-wt-regular.woff2); }

Step 12. Save your file as [YOUR_PLATFORM_NAME].css (Notice the .css at the end! It shouldn't be a simple txt file)

Step 13. Now go to your content builder again

Step 14. Go to "Documents" from the menu on the left

Step 15. Upload a new file using the button on the top right

Step 16. Select the text file we have just created

Step 17. Upload it

Step 18. Look for it under "Documents"

Step 19. Open the document. You should be in a page like the one in the screenshot below:

Step 20. Copy the link address of the text in green.

Step 21. Paste it in your platform's layout settings under Heading font URL and under Body font URL.

Step 22. Change the url in both places from 'yourCBurl/documents/####/fileName' to 'yourCBurl/media/documents/fileName'.

So for example this link 'https://lxp.content.qollap.com/documents/8012/gtsuper.css' becomes 'https://lxp.content.qollap.com/media/documents/gtsuper.css'.

Step 23. Fill in the fields Heading font-family name and Body font-family name, with the same names you added in your text file for your heading and body fonts. 

@font-face {
    font-family:Produkt Light;
    src: url(https://lxp.content.qollap.com/media/documents/Produkt-Light-Web.woff);
}
@font-face {
    font-family: Produkt Super;
    src: url(https://lxp.content.qollap.com/media/documents/Produkt-Super-Web.woff);
}

💡 Make sure to write the exact name of the fonts as stated in the template.
​
Your fonts are ready to be used and your platform styling is ready to go!

Did this answer your question?