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.

See Also

• How to Add Custom CSS for Improved Design and Branding
• Understanding Banner Customization Options
• Customizing Secure Privacy Cookie Banners with CSS