We have noticed a portion of WordPress and Shopify websites have certain settings in place which result in the Usercentrics consent solution displaying fonts in a smaller than normal size.


For example, your consent may look like this: 


 


We have noticed this is due to a conflict with a css setting, where the site is set to display the font on browsers globally a smaller percentage (usually 62.50%) of the normal defined size. This results in the consent also displaying the font in a smaller size than normal. 



Here is an overview on how to resolve the issue: 


  1. Update your Usercentrics embed code to Version 3

  2. Activate V3 CSS control

  3. Copy/paste some CSS into the Additional CSS area

  4. Then test in a fresh incognito window. 





Step-by-step guide:


Part #1 - Update to Usercentrics Version 3


  1. If you are using the Termageddon wordpress plugin:

    1. Log in to your website’s /wp-admin area, and go to “Tools” -> “Termageddon + Usercentrics” -> “Settings”

    2. For “Embed Code Version”, change it from V2 to V3 and click Save Changes

    3. You have activated Version 3 Usercentrics. Proceed to Part #2 below.

  2. If you instead pasted the Usercentrics script into the <head> of your website:

    1. Replace this URL within the script:


https://app.usercentrics.eu/browser-ui/latest/loader.js


  1. With this URL:


https://web.cmp.usercentrics.eu/ui/loader.js


  1. You have now updated to Version 3 Usercentrics. Proceed to Part #2 below.



Part #2 - Activate V3 CSS control


  1. Log into Termageddon (https://policies.termageddon.com)

  2. Click this link and follow the steps in the prompt to activate CSS control:


https://policies.termageddon.com/dashboard?cssModal=true


  1. You have now activated V3 CSS control



Part #3 - Copy/paste some CSS into the Additional CSS area


  1. In your Termageddon Dashboard, click into the impacted license, then click Embed Codes

  2. In the Cookie Consent Tool box, you should see a new area titled “Custom CSS (advanced)”

  3. Copy/paste the following CSS anywhere within the Custom CSS area:


#uc-main-dialog {font-size:80%;}

* Note: 80% can be adjusted however this % typically resolves the issue for most sites.

  1.  Click Save Custom CSS




Part #4 - Testing in a fresh incognito window


  1. To test these changes, visit the website in a *fresh* incognito window. 

  2. If you are noticing that any of the colors of your consent banner are not properly reflecting your brand color, copy/paste the following additional CSS into the Custom CSS area (and click Save Custom CSS after)

* { --color-bg: #XXXXXX; }

* { --color-tabs-tab-active: #XXXXXX; }

* { --color-toggle-background-active: #XXXXXX; }

(Replace XXXXXX with your brand color hex code.)


  1. Test in a fresh incognito window. 

    1. Please note, although Version 3 of Usercentrics offers advanced page load speed improvements, this is due to extensive cdn caching on their end; if possible, test in a fresh incognito window using a VPN or a different device; otherwise you may need to wait to see these changes


If you have any issues, please contact us, and provide us a URL for us to help test your changes.