# Uploading Custom Fonts to the Privacy Center (/docs/privacy-center/design-and-content/uploading-custom-fonts)

## Overview [#overview]

You can brand your Privacy Center with custom header and body fonts from the [Appearance](https://app.transcend.io/privacy-center/colors-and-styles) 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.

## Before you start [#before-you-start]

- 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

## How custom fonts work [#how-custom-fonts-work]

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

<Callout type="info" title="CSS loads fonts">
  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.
</Callout>

## Upload custom fonts [#upload-custom-fonts]

### 1. Open Colors & Styles [#1-open-colors--styles]

In the Admin Dashboard, go to [Privacy Center → Appearance](https://app.transcend.io/privacy-center/colors-and-styles) and scroll to the **Fonts** section.

### 2. Upload your \`.otf\` font files [#2-upload-your-otf-font-files]

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.

### 3. Copy each font file URL [#3-copy-each-font-file-url]

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.

<Callout type="info" title="Copy from download button">
  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.
</Callout>

### 4. Create a CSS stylesheet [#4-create-a-css-stylesheet]

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](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#fallback_weights) for details.

Example:

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

### 5. Upload the CSS file [#5-upload-the-css-file]

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.

### 6. Set Font Name(s) [#6-set-font-names]

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.

### 7. Save and publish [#7-save-and-publish]

Save your draft, then review and publish so the fonts appear on your live Privacy Center. See [Saving and Publishing to the Privacy Center](../configuration-and-publishing/saving-and-publishing-to-the-privacy-center.mdx) for details.

## Using a hosted or third-party stylesheet [#using-a-hosted-or-third-party-stylesheet]

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.

## Related articles [#related-articles]

- [Configuring the Privacy Center](../configuration-and-publishing/privacy-center.mdx)
- [Saving and Publishing to the Privacy Center](../configuration-and-publishing/saving-and-publishing-to-the-privacy-center.mdx)