Using custom fonts for your banner

If your website uses a custom font, and you would also like to use it on your banner to make it fit seamlessly with your website, you can configure this in the Usercentrics CMP Admin.

In this guide we'll use "Arsenal" as our custom font as an example.

First off, you must host the font family on your site. Unless you're looking to use a custom font exclusively for the banner, you will most likely already be doing this.

In your website's source code, this would look something like this:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
  href="https://fonts.googleapis.com/css2?family=Arsenal:wght@400;700&display=swap"
  rel="stylesheet"
>

<!-- Usercentrics CMP code -->
<script
  id="usercentrics-cmp"
  src="https://app.usercentrics.eu/browser-ui/latest/loader.js"
  data-settings-id="XXXXXX"
  async
></script>

<style>
  body {
    font-family: 'Arsenal' ,sans-serif
  }
</style>

Next, you'll need to set the custom font in the Usercentrics CMP Admin. To do this, follow the following steps:

1. Log into the Usercentrics CMP Admin.
2. Select Appearance in the main menu.
3. Select the Styling tab.
4. Scroll down to the Fonts section.
5. Select "Custom font" under Font-family.
6. Enter the exact name of the font that you want to use.

Custom fonts in the Usercentrics CMP Admin