Change text font size

Hi @sporbillis,

It could be that your theme also adds some CSS that overrides the font styles you configured for the Cookie Banner.

On a fresh test site with only Complianz and a default WordPress theme, you’d be able to change the font-family and font-size of the Cookie Banner message with CSS like this:

.cmplz-cookiebanner .cmplz-message {
    font-family: Georgia, serif;
    font-size: 16px;
}

If you provide an URL to your website, we can take a look and provide some CSS for your specific situation.

Kind regards, Jarno

Hey, thanks for your reply! Appreciate it,

website is fitlywell . com

Hi @sporbillis,

The theme does add some styles that appear to override the font-family in the Cookie Banner.

You should be able to add some CSS to Appearance > Customize > Additional CSS to override these, that works fine when I test it in the browser.

.cmplz-cookiebanner {
    font-family: 'Nunito';
    font-size: 14px;
}

You could additionally try adding an !important flag if it doesn’t seem to get applied yet. (Example: .cmplz-cookiebanner {font-family: 'Nunito'!important;})

Hope it helps! Regards, Jarno

• This reply was modified 1 year, 9 months ago by jarnovos.

Hey thanks for trying to help.

I have added both one by one, still doesn’t seem to work. I tried setting the font to 50px as well to see if it ignores it and it seems that it ignores it. Any other ideas?

Also the title is not the same as in the admin preview. In admin is bold and bigger, here is small and not bold

Hi @sporbillis,

The font size itself can also be adjusted under Complianz > Cookie banner > Banner settings > Font size, have you tried changing it here as well?

The CSS that you’ve added to use the ‘Nunito’ font seems to work fine. To make the title bold as well you could use:

.cmplz-cookiebanner .cmplz-title {
    font-weight: 900;
}

I added it as you wrote above however it’s still not working for title.
Also button text is different in front end and info links below are different.
I am attaching a screenshot of how it looks in inspect element after I add it
Also I just noticed that in mobile view title disappears!

https://ibb.co/vJdtZ6n

• This reply was modified 1 year, 9 months ago by sporbillis.

Hi @sporbillis,

You are right about the title, you can add the !important flag to it. That should prevent it from being overridden.

Title is hidden on mobile devices by default. Re-enabling it can be done with the below CSS:

@media (max-width: 425px) {
.cmplz-cookiebanner .cmplz-header .cmplz-title {
    display: block!important;
    }
}

If you let us know what you want to change about the buttons/links, we can provide CSS for that.

Kind regards, Jarno

Thanks for trying to help,

So this is the css that you provided so far :

.cmplz-cookiebanner {
font-family:'Nunito'!important;		
font-size: 19px;
}
.cmplz-cookiebanner .cmplz-title {
    font-weight:900;!important;
}
@media (max-width: 425px) {
.cmplz-cookiebanner .cmplz-header .cmplz-title {
    display: block!important;
    }
}

However as you can see here: https://ibb.co/bL856F9
there are still some issues that are not fixed:
1. Title is still not bold, looks normal font

2. On mobile it takes 2 lines now instead of 1 and is still not bold

Regarding of how I would like, i would like it to be exactly like the preview in admin which looks great!! See here: https://ibb.co/r4Qts6K
I can also provide you access to the website if that can help you more I just don’t know to hide it from the forum!

Hi @sporbillis,

For the button:

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept {
    font-weight: 700;
    font-family: inherit;
}

Regarding the title, there’s an issue in the CSS itself: https://snipboard.io/Tv8qQS.jpg

It should be:

.cmplz-cookiebanner .cmplz-title {
    font-weight: 700!important;
}

You can play with the font-weight if needed. If you want to inherit styles from your theme you can use ‘inherit’ as shown above, or ‘unset’ a Complianz CSS value to default to other styling. Let me know if you need anything else,

regards Aert

aah that seems to fix issue with title and for buttons however title is now gone again for mobiles. This is all the css I am using from the above:

.cmplz-cookiebanner {
font-family:'Nunito'!important;		
font-size: 19px;
}
.cmplz-cookiebanner .cmplz-title {
    font-weight: 700!important;
}
}
@media (max-width: 425px) {
.cmplz-cookiebanner .cmplz-header .cmplz-title {
    display: block!important;
    }
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept {
    font-weight: 700;
    font-family: inherit;
}

See here: https://ibb.co/FWGn5bL

It was working a bit earlier, didn’t change anything else apart from adding the last part of css you provided. The above is complete copy paste from my css

Hi @sporbillis,

There is one } too many in your CSS. Just above the @media (max-width: 425px) { line, you can remove one of the } symbols and it should start working).

Although I would additionally recommend replacing the current CSS that you have, to display the title on mobile, with the below. This will nicely put it in the center.

So, aside of removing the } as mentioned above, you can also replace this part of the CSS:

@media (max-width: 425px) {
.cmplz-cookiebanner .cmplz-header .cmplz-title {
    display: block!important;
    }
}

With the below:

@media (max-width: 425px) {
.cmplz-cookiebanner .cmplz-header .cmplz-title {
    display: flex!important;
    grid-column: 1/4!important;
  }
}

Kind regards, Jarno

Hey it worked perfectly, I used the second code your provided BUT the X and title are not aligned and looks weird : https://ibb.co/9rFRTJC

Any chance we can fix that too?

Hey guys, any chance we can fix that alignment? Appreciate it!