How to Add Custom Fonts Using CSS in Secure Privacy Banner

Learn how to import and apply custom fonts to your Secure Privacy banner using CSS with step-by-step instructions and examples.

Aditya Kulkarni

Updated 3 weeks ago

How to Use a Custom Font in Your Secure Privacy Banner with Custom CSS

Want to use a specific font in your Secure Privacy banner that’s not included in our default options? You can easily achieve this by adding custom CSS to import and apply fonts from popular font libraries like Google Fonts.

Who Is This For?

Website administrators and marketers customizing the look of Secure Privacy banners
Developers implementing design adjustments using CSS

Step 1: Choose Your Font

Select a font: Choose from popular font libraries such as Google Fonts.

Step 2: Import the Font

Use the @import rule: Add the following line at the very beginning of your custom CSS code 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 font library. For example, Roboto would look like @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');.
Important: Always place font imports at the very start of your CSS to ensure they load correctly.

Step 3: Apply the Font to Your Banner

Use CSS selectors: Target specific HTML elements in the banner, such as headings or buttons, and apply your custom font using the font-family CSS property.
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); .sp-banner-heading { font-family: 'Roboto', sans-serif; }

This example imports the “Roboto” font from Google Fonts and applies it specifically to the banner heading.

Remember:

Test thoroughly: Always test your custom CSS changes carefully to ensure they work correctly and do not interfere with banner functionality.
Refer to the font library’s documentation: Check instructions and guidelines provided by your chosen font source for importing and usage specifics.

Common Issues & Fixes

Fonts not loading?: Ensure you placed the @import statement at the very top of your CSS file. Improper placement can prevent the font from loading.
Custom font not applying?: Make sure your CSS selectors correctly target the Secure Privacy banner elements you want to style.
Performance concerns?: Use only the fonts and font weights you need to minimize load times and maintain fast page performance.

Secure Privacy Support Center