Hi everyone,

I frequently use Finsweet’s Fluid Design Generator for flexible font scaling based on the viewport size in my Webflow projects. Here’s an example of the CSS it generates:

html { font-size: calc(0.875rem + 0.41666666666666663vw); }
@media screen and (max-width:1920px) { html { font-size: calc(0.875rem + 0.41666666666666674vw); } }
@media screen and (max-width:1440px) { html { font-size: calc(0.6880853277835588rem + 0.6243496357960459vw); } }
@media screen and (max-width:479px) { html { font-size: calc(0.7496077405857741rem + 0.6276150627615062vw); } }

When I copy this code into a Custom Code Embed in Webflow, it works perfectly. However, doing the same in Webstudio doesn’t seem to work – the CSS is accepted, but the font scaling doesn’t apply whether on the canvas nor on the live site.

Does anyone have experience using fluid font sizing like this in Webstudio? Could it be related to how Webstudio handles global CSS rules? Or am I missing something obvious?

Any insights would be greatly appreciated!

I tested the language variable in the path, and it works great. But there’s one issue: the language variable is available in system.params for dynamic links (e.g., /:language/blog), but when the navbar is set as a global slot/component, it’s not accessible. Any idea or workaround how to access system variables in a slot/component?