Odd looking fonts within HTML embed in Safari

Design help General
1

Hello!

I have embedded a JS script on my Cookie Declaration page from Cookiebot.

When I apply font and font color to HTML embed, it changes the font successfully, however the font looks like over sharp, not antialiased or something like that. This only happens in Safari, Chrome is perfectly fine

I’ve tried pasting this into HTML embed, but still no luck.

-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;

Any suggestions please?

20
201052×408 48.3 KB

Here is my site Read-Only: LINK

2

Hi @radmitry, can you help to share the published site link? font styles can render differently for different browsers, it helps to see the published site.

Thanks in advance

3

Hi @cyberdave here it is Roger Castillo - Being Lived: Cookie Declaration

4

Hi @radmitry, those fonts are coming from the cookiebot embed, so setting the font on the html embed is going to have no effect.

I would try adding this to the custom css on the page on the body:

<style>
body {
-webkit-font-smoothing: subpixel-antialiased
}
</style>

That may or may not help, I found a feature note that indicated that there was only partial support for font smoothing: Can I use... Support tables for HTML5, CSS3, etc

Republish the site after adding the CSS.

Let me know if that helps.

5

Hi @cyberdave unfortunately this didn’t help.

By the way, when I was changing font size, family and color in the html embed styles it does change, surprisingly

6

Hi @radmitry / @cyberdave

I am trying to add CookieBot into my site just like radmitry has

Would you be able to advice how we are able to add the Data Consent into Webflow?
It says it involves Attributes, however I have never used one in Webflow and I am abit confused as into how to set it up

Link to the configuration page setup is attached: Help | How to install Cookiebot Consent Management Platform (CMP)

Hope you can help

Thanks
Mont

7

No worries all sorted

8

Hi @radmitry, well, the font selection on the html embed probably have an impact, I think the solution is to look at the styles which are rendered on the elements on the published site, see what the class names are and then use some custom css to override those styles which are coming from the embed.

At least it had appeared to me that there was a stylesheet that was being used by the embed code from cookiebot.

9

Hi Dave, I thought of finding their paragraph classes with inspector and restyling them and I can do so…

However I have noticed there is something in their code or other pieces of stylesheet , which screws any text on the page.

So on this page, the header which says “Cookie Declaration” is actually a header I’ve pasted in Webflow, this is not a part of embed, but it is also being screwed in Safari.

10

Hi @radmitry, I was doing more checking on this issue and I do not think it is about the embed code (however I would not rule it out yet), but maybe rather the way that safari and chrome are rendering the text.

Here is a piece of css to add to the body css I gave previously, or you can try to apply the heading and font classes used.

text-rendering: optimizeLegibility;

After republishing, see if it improves.

Here is the stack overflow article where I found the text-rendering option above: css - Same font except its weight seems different on different browsers - Stack Overflow

I hope that helps, let me know.

1 Like
11

Wooooaaa

This worked like charm

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

Thank you so much @cyberdave :pray:
No I am totally satisfied :relaxed::webflow_heart:

1 Like