Locale-Specific Styles & Code

Webflow Enterprise has the ability to localize styles within the designer and create a unique experience for each locale.

But what about non-Enterprise users who just need simple styling, a new visible/hidden element, or a locale-specific script?

Styles

Use an embed with custom style code and the _:lang() pseudoselector, e.g.;

Locale-Specific Fonts

This approach can be used to specify locale-specific fonts as well.

Build your site using the font you want for your default locale, for simplicity. Then use an HTML embed in your Nav or Footer symbol that specifies a font override for your alternate locales, e.g.;

/* Specific font for English content */
:lang(en) {
    font-family: 'Inter', sans-serif;
}

/* Specific font for German content */
:lang(de) {
    font-family: 'Noto Sans', sans-serif;
}

Remember to ensure that all fonts are already installed on your site so that they're available. You will likely need to look at the generated CSS to determine how to specify the font, style and weight properly.

Scripts

Scripts cannot be suppressed from pages, but you can decide what logic to run based on the page locale.

‍