Where do I add property CSS code

My Client just ordered me to add this property text-rendering: optimizeLegibility;
I don’t code and don’t know where to put it in Webflow. The custom font they have given me renders really badly in all the browsers. Can anyone help.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

What are the reasons?

It’s an svg property that can have very serious drawbacks:

There are actually significant, effectively fatal performance problems (such as 30-second loading delays, or longer) on mobile devices when using optimizeLegibility for long pages. Apply it only if you know what the maximum text length will be. (Also, avoid using it for Android clients, at least on the older versions that everyone still uses: its font renderer often has very strange bugs when this mode is enabled.)

Especially if you apply that to the Body. So if you want to apply it, add a class, like .legibility to the titles and paragraph that need it, and add the following code:

<style>
.legibility {text-rendering: optimizeLegibility}
</style>

And add it in the Project Settings Custom Code tab, in the Head field.

But wouldn’t take this risk, imho it only changes some kerning on some fonts. Clients need to have a real reason I think.

2 Likes

Thank you
This is the code that worked in the end
.legibility {text-rendering: geometricPrecision}