# Add Custom Fonts to Your Cookie Banner

> Use any Google Font or web font in your Secure Privacy cookie banner. This step-by-step CSS guide covers @import setup, selector targeting, and font loading best practices.

- Canonical: https://support.secureprivacy.ai/article/how-to-add-custom-fonts-using-css-in-secure-privacy-banner
- Product: Consent Management
- Category: Customization
- Published: 2026-03-06T12:43:00+00:00
- Updated: 2026-03-23T22:48:17.374+00:00
- Reading time: 4 minutes

---

**Summary:** Want to use a specific font in your Secure Privacy cookie banner that isn't included in the default options? You can easily **add a custom font to your Secure Privacy banner** by importing any typeface from popular libraries like [Google Fonts](https://fonts.google.com) using a simple `@import` rule in the Custom CSS panel. This guide walks through every step.

## Who Is This Guide For?

-   **Website administrators and marketers** customizing the visual appearance of Secure Privacy consent banners to match their brand typography
-   **Developers** implementing design adjustments to the banner using custom CSS

## Step 1: Choose Your Custom Banner Font

-   **Select a font:** Browse and choose a typeface from a popular web font library such as [Google Fonts](https://fonts.google.com). Look for fonts that complement your brand identity and are available in the weights you need.
    

## Step 2: Import the Font Using @import

-   **Use the `@import` rule:** Add the following line at the very beginning of your Custom CSS to import your chosen font:
    
    ```
    @import url('https://fonts.googleapis.com/css2?family=Your+Font+Name&display=swap');
    ```
    
-   Replace `Your+Font+Name` with the actual font name from the library. For example, for Roboto:
    
    ```
    @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
    ```
    
-   **Important:** Always place `@import` statements at the very start of your CSS. Placing them after other rules will prevent the font from loading correctly.
    

![Secure Privacy Custom CSS panel showing an @import rule for Google Fonts added at the top of the CSS field](https://pub-7bd19505838640d0a08ef1bd6ec3fb9b.r2.dev/articles/40b5363c8545ecf88b0e-c9defee23598.webp)

Place your `@import` rule at the very top of the Custom CSS field in Secure Privacy's design editor.

## Step 3: Apply the Custom Font to Your Secure Privacy Banner

-   **Use CSS selectors** to target specific elements in the banner—such as headings or buttons—and apply your chosen font using the `font-family` property.
    

The following example imports Roboto from Google Fonts and applies it to the banner heading:

```
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

.sp-banner-heading {
  font-family: 'Roboto', sans-serif;
}
```

![Secure Privacy Custom CSS panel showing font-family applied to the sp-banner-heading selector using Roboto from Google Fonts](https://pub-7bd19505838640d0a08ef1bd6ec3fb9b.r2.dev/articles/412068307301956a4904-c0c2bcb37b32.webp)

Apply your imported font to specific banner elements using the appropriate Secure Privacy CSS selector.

This targets the `.sp-banner-heading` class specifically. You can apply the same pattern to other banner elements such as body text, buttons, or links using their respective selectors.

## Best Practices for Custom Fonts in Cookie Banners

-   **Test thoroughly after every change:** Always verify that your custom CSS works correctly and does not interfere with banner functionality or consent button behavior.
    
-   **Check the font library's documentation:** Review the import instructions and usage guidelines provided by your chosen font source for any platform-specific requirements.
    
-   **Load only what you need:** Import only the font weights and styles you actually use. Loading unnecessary font variants increases page weight and can negatively impact Core Web Vitals scores.
    

## Common Issues & Fixes: Custom Fonts Not Loading

-   **Font not loading at all?** Ensure the `@import` statement is placed at the _very top_ of your CSS, before any other rules. Any CSS written above the `@import` line will cause it to fail silently.
    
-   **Custom font not applying to the banner?** Double-check that your CSS selector correctly targets a Secure Privacy banner element. Use your browser's DevTools (Inspect Element) to confirm the exact class name being used by the element you want to style.
    
-   **Performance concerns?** Use only the font weights you need (e.g., `400` and `700`) and add `display=swap` to your Google Fonts URL to prevent render-blocking.
    

## Frequently Asked Questions (FAQ)

### Can I use any font library, or only Google Fonts?

You can use any web font library that provides a CSS `@import` or `<link>` URL—including [Google Fonts](https://fonts.google.com), Adobe Fonts (Typekit), Bunny Fonts, and others. The same `@import` approach applies regardless of the source.

### Where do I add the custom CSS in Secure Privacy?

In your Secure Privacy dashboard, go to **Design > Cookie Banner > Custom CSS**. Paste your `@import` rule and `font-family` declarations there. See the full guide: [How to Add Custom CSS for Improved Design and Branding](https://support.secureprivacy.ai/article/add-custom-css-for-branding--secureprivacy-guide).

### Which CSS class should I target for the banner heading?

Use `.sp-banner-heading` to target the main heading of the Secure Privacy banner. For other elements, use your browser's Inspect tool to identify the correct Secure Privacy class names applied to each component.

### Will adding a custom font slow down my website?

It can, if you load too many font weights or styles. To minimize impact, import only the weights you need and include `display=swap` in your Google Fonts URL to prevent the font from blocking page rendering.

## See Also

-   [How to Add Custom CSS for Improved Design and Branding](https://support.secureprivacy.ai/article/add-custom-css-for-branding--secureprivacy-guide)
-   [Understanding Banner Customization Options](https://support.secureprivacy.ai/article/customize-your-websites-cookie-banner-using-templates)
-   [Customizing Secure Privacy Cookie Banners with CSS](https://support.secureprivacy.ai/article/customizing-secure-privacy-cookie-banners-with-css)