Customize the banner font and style

You can choose the banner's font in the Cookie Compliance dashboard. For a font that isn't on the list, or for styling the Design page doesn't offer, you can add a little CSS to your own website. This article shows both, and the few rules that keep your banner working and your visitors' choices clear.

Choose a font

1. Go to Configuration → Design and find Typography.
2. Pick a Font:
   • Banner default – the font your banner uses today. On the Classic banner engine that's Arial. On the New engine it's your website's own font. On both engines, the notice over a blocked video or map uses your website's font for its text and Arial for its button. The option shows which one applies to your site.
   • Your website's font – the banner uses the same font as your pages.
   • Sans-serif (Arial, Helvetica) – a plain, clean font.
   • Serif (Georgia) – a classic book-style font.
   • Device font – the font of the visitor's own phone or computer (for example San Francisco on Apple devices, Segoe UI on Windows).
3. Click Publish Now.

None of these makes the banner download a font: your website's font is already on the page, and the others are already on the visitor's device. The Design preview can't show your website's own font. On the New engine the preview says so instead; on the Classic engine it shows a stand-in font.

To check: open your site in a new private window. Returning visitors may see the old font for up to an hour.

Use another font

To use your own font, leave Font on Banner default, then add this line to your website's CSS. You can also copy it from Using another font? under Typography.

body #hu, body #hu .hu-btn, body #hu-passive, body #hu-revoke, body .hu-iframe-overlay .hu-btn { font-family: "Your Font", sans-serif; }

1. Replace Your Font with the name of a font your website already loads (the one your theme uses for headings or text, for example). Adding a new font service just for the banner means every visitor's browser contacts that service.
2. Paste the line into your site's CSS:
   • WordPress, classic theme: Appearance → Customize → Additional CSS.
   • WordPress, block theme: Appearance → Editor → Styles → ⋮ → Additional CSS.
   • Any other site: your site's main stylesheet.
3. Save, clear the cache of any caching or optimization plugin, and open your site in a new private window.

The line works on both banner engines. It changes the banner, its buttons, the round icon that reopens it, the notice shown to visitors whose browser sends a Global Privacy Control signal, and the button on a blocked video or map. Leave Font on Banner default when you use the line. With a Font chosen, the line has no effect on the Classic engine and gives mixed fonts on the New engine.

Change colors and sizes

Set colors and text sizes on the Design page first — that's the easiest way, and it keeps the whole banner consistent. If you need a value the Design page doesn't offer, each color and size is also a CSS setting you can change on the banner itself:

#hu { --hu-primaryColor: #c00; --hu-btnColor: #c00; }

To recolor the buttons, set both --hu-primaryColor and --hu-btnColor, as above. On the Classic engine the primary color alone changes only the link-style buttons.

Put it on #hu, as above, not on html or :root: there the banner's own value wins. #hu is the banner only; to change the reopen icon, the Global Privacy Control notice and the blocked-video notice too, write #hu, #hu-revoke, #hu-passive, .hu-iframe-overlay { --hu-primaryColor: #c00; --hu-btnColor: #c00; }. Keep text easy to read against its background.

Parts you can style

These names stay the same on both banner engines, so CSS written for them keeps working after updates:

Start every rule with body #hu (or body plus the part's own name, as in the table) — the banner's own styles are written the same way, and the extra body makes yours win. For example:

body #hu .hu-heading { font-weight: 400; }

If a rule still doesn't take, add !important. That's needed for the heading's size and spacing on the Classic engine, and for text alignment and spacing on the New engine's Compact style. For the message's color and size, use Text Color and Text Font Size on the Design page: on the Classic engine a rule on .hu-body may not change them, even with !important. If your theme forces its own style on the banner with !important, the same fix applies: body #hu .hu-heading { color: #434f58 !important; }.

Other parts of the banner — the choice buttons, the Customize panel, the categories and links — are named differently on the two engines and may change with updates. CSS written for them can stop working without notice.

What not to do

Your visitors must always be able to see and use every choice. Don't use CSS to hide, shrink, cover or fade out:

• any of the consent choices or category switches,
• the way to say no — the most private choice (and Save on the Classic engine),
• Customize and the close button,
• your privacy policy and other policy links,
• the Global Privacy Control notice.

Keep the choices equally easy to see. How the banner appears on your site is your responsibility as the site owner, and a choice a visitor can't reach is a choice they can't make. Also keep the outline that shows keyboard users where they are; change its color if you like, but don't remove it.

This article is technical guidance, not legal advice.