When setting up the styling for your platform, you can specify what fonts to use for body and heading texts. There are two ways to do so: the easiest way to approach this is to use google fonts (or another font website like it); however, if your client has custom font files you can use them as well.


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:

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

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

  3. Select the font style you need for the heading texts (in this example I looked for Roboto and selected the style "Medium 500").

  4. Copy the link highlighted in the screenshot to your platform's layout settings under Heading font URL.

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

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

Disclaimer: for simplicity's sake, we strongly advise to use google fonts instead of custom fonts because the latter tend to cause problems more often than not.


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

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

  2. Login

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

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

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

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

  7. Upload the file

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

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

  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);
    }
  11. Edit the template in your text editor adding the names for your fonts and the url to your font files.

    1. If you uploaded files to the CB, then:

      1. Look for them under "Documents"

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

      3. Copy the link address of the text in green.

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

      5. 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'.

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

      7. 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);
        }
    2. If you had direct urls to your font files:

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

      2. 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); }

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

  13. Now go to your content builder again

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

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

  16. Select the text file we have just created

  17. Upload it

  18. Look for it under "Documents"

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

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

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

  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'.

  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. For example, if this is my file:

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

    I will write Produkt Light under Heading font-family name and Produkt Super under Body font-family name.

    Your fonts are ready to be used and your platform styling is ready to go!

Did this answer your question?