Uploading Custom Fonts to the Privacy Center
Upload custom header and body fonts for your Privacy Center using font files and a CSS stylesheet on the Colors & Styles page.
Overview
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.
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
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
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.
Upload custom fonts
1. Open Colors & Styles
In the Admin Dashboard, go to Privacy Center → Appearance and scroll to the Fonts section.
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
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 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.
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 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");
}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)
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
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.
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.