Uploading Custom Fonts to the Privacy Center

You can brand your Privacy Center with custom header and body fonts from the Appearance page in the Admin Dashboard. Custom font files are uploaded as OpenType (`.otf`) assets and loaded through a CSS stylesheet that defines `@font-face` rules.

  • Permission to manage the Privacy Center in the Admin Dashboard
  • Your font files in `.otf` format
  • A font license that allows embedding the fonts on the web
  • Ability to create a small CSS file with `@font-face` rules

The Fonts section has two rows:

  • Header text font — used for headings on the Privacy Center
  • Body text font — used for body copy on the Privacy Center

For each row you configure:

  • Font Name(s) — the CSS `font-family` name(s) the Privacy Center should apply
  • Upload Font/CSS Files — upload `.otf` font files and a `.css` stylesheet

The Privacy Center loads the uploaded CSS file as a stylesheet. Uploaded `.otf` files are stored with public URLs, but they are only used if your CSS `@font-face` rules point to those URLs. Uploading an `.otf` file alone does not change the fonts on the page.

In the Admin Dashboard, go to Privacy Center → Appearance and scroll to the Fonts section.

For Header text font and/or Body text font, click Upload font files (*.css, *.otf) and select your `.otf` files. You can upload multiple files if you need different weights or styles.

After upload, each font file appears in the list with a download button. Right-click the download button and choose Copy Link Address (wording may vary by browser). Save these URLs. You will use them in your CSS `@font-face` rules.

Copy the URL from the download button, not from the file name label. The download button links to the public file URL the Privacy Center can load.

Create a `.css` file with `@font-face` declarations. Point each `src` URL at one of the uploaded font file URLs, and set `format("opentype")` for `.otf` files. If you use multiple weights, set `font-weight` on each rule so browsers pick the correct face. See MDN on font-weight fallbacks for details.

Example:

@font-face {
  font-family: "Brand Header";
  font-style: normal;
  font-weight: 400;
  src: url(https://prod-backend-company-uploads-transcend-io.s3.amazonaws.com/<org-id>/<file-id>)
    format("opentype");
}

@font-face {
  font-family: "Brand Header";
  font-style: normal;
  font-weight: 600;
  src: url(https://prod-backend-company-uploads-transcend-io.s3.amazonaws.com/<org-id>/<file-id>)
    format("opentype");
}

@font-face {
  font-family: "Brand Body";
  font-style: normal;
  font-weight: 400;
  src: url(https://prod-backend-company-uploads-transcend-io.s3.amazonaws.com/<org-id>/<file-id>)
    format("opentype");
}

Upload your `.css` file to the same font row using Upload font files (*.css, *.otf). The CSS appears as Font File in the file list. This stylesheet is what the Privacy Center loads when the page renders.

In the Font Name(s) column, enter the same `font-family` value(s) you defined in your CSS. For example, if your CSS uses `font-family: "Brand Header";`, enter Brand Header for the header row.

Save your draft, then review and publish so the fonts appear on your live Privacy Center. See Saving and Publishing to the Privacy Center for details.

If your fonts are already available from a CSS URL (for example Google Fonts, Adobe Fonts, or a stylesheet you host yourself), you do not need to upload `.otf` files in the Admin Dashboard. You still need a CSS stylesheet URL that the Privacy Center can load, and Font Name(s) that match the `font-family` values in that stylesheet.

One approach is to upload a `.css` file that only contains `@font-face` rules pointing at your hosted font URLs. Another is to use a CSS file that is already publicly reachable and upload that file (or an equivalent copy) so the Privacy Center has a stylesheet URL to load.