Choose localization language fonts?

Design help Localization
1

I think it seems like a no brainer. I can use an Adobe Font for my main English site. However, adding a Thai language font (in our case) to the same Adobe Fonts web project sadly isn’t recognized, and it just uses the fallback very ugly system font. It says it’s there in the font settings. It’s just not used. I hoped localization would have fixed this.

Is there not any way at least set this? Custom code, even? A Webflow “hack?” Seems basic. Don’t need custom classes just for a new language, just the font used in the same weights/setings as already defined for the main language. And, we can’t afford and don’t qualify or should need Enterprise Localization pricing. Any ideas? I’m sure I’m just missing something obvious. Because, support for this seems obvious. Thank you.

2 Likes
2

Hi! I have the same problem with localization. I just bought a localization pack, but I can’t change the styles in the local version in any way.
I selected an approximate font for the local version (not Latin) which will make the local site not so ugly, but unfortunately the change options are frozen. I wrote to support, but have not yet received a response. Maybe someone has already solved this problem. Оr localization is useless for all non-Latin sites at this stage.

3

From what I udnerstand from the pricing here - Website translation and localization | Webflow - absurdly, “style localization” is only for Enterprise. I can understand, if I wanted to create a whole set of super refined style classes for a specific localization. But, I just want “a font” that’s already part of my Adobe Fonts web project. Even on fonts.adobe.com you can set the language for that font within the web project; Webflow sadly just seems to ignore it :roll_eyes:

4

I have not tried varying the styles between locales, but the basic approach to do it with custom CSS would probably be to use the :lang() pseudoselector.

You’ll just need to figure out which elements you want the font changed on, and then target Thai specifically. If you’ve done an exceptional job of keeping your design clean, than in theory only the body (all pages) setting would have the font set. You could try something like;

:lang(th) {
    font-family: 'YourThaiFont', sans-serif;
}
1 Like
5

i used the below method to style fonts and all the tags

:lang(en)
body {
/ Base Setup*/
font-family: Libre Baskerville, serif !important;
/* set custom font to match your LTR language - Example: [Arial, sans-serif;] */

/* Advanced*/
font-family: Libre Baskerville, serif;
font-weight: ;
font-size: ;
line-height: ;
color: ;
font-style: ;
text-decoration: ;
letter-spacing: ;
text-transform: ;
}

p {
font-family: ‘Montserrat’, sans-serif !important;
}

h1 {
line-height:1.2em ;
font-family: Libre Baskerville, serif !important;
}

h2 {
font-family: Libre Baskerville, serif !important;
}

h3 {
font-family: Libre Baskerville, serif !important;
line-height:1.2em ;
}

h4 {
font-family: Libre Baskerville, serif !important;
}

h5 {
font-family: Libre Baskerville, serif !important;
}

h6 {
font-family: Libre Baskerville, serif !important;

}

p {

}

a {

}

label {

}

blockquote {
font-family: Libre Baskerville, serif !important;

}

figure {

}

.text-rich-text h1 {

}

.text-rich-text h2 {

}

.text-rich-text h3 {

}

.text-rich-text h4 {

}

.text-rich-text h5 {

}

.text-rich-text h6 {

}

.text-rich-text p {

}

.text-rich-text a {

}

.text-rich-text label {

}

.text-rich-text blockquote {
font-family: Libre Baskerville, serif !important;

}

.text-rich-text figure {

}

.heading-style-h1 {
font-family: Libre Baskerville, serif !important;
}

.heading-style-h2 {
font-family: Libre Baskerville, serif !important;
line-height:1.3em ;
}

.heading-style-h3 {
font-family: Libre Baskerville, serif !important;
line-height:1.4em ;
font-size: 1.6em;
}

.heading-style-h4 {
font-family: Libre Baskerville, serif !important;
font-size: 1.2em;
}

.heading-style-h5 {
font-family: Libre Baskerville, serif !important;

}

.heading-style-h6 {
font-family: Libre Baskerville, serif !important;

}

.subcategory-link {
font-family: ‘Montserrat’, sans-serif;
}

.publishing-date-wrapper {
font-family: ‘Montserrat’, sans-serif;
}

.category-wrapper {
font-family: ‘Montserrat’, sans-serif;
}

.category-subcategory-wrapper {
font-family: ‘Montserrat’, sans-serif;
}

.menu-links {
font-family: ‘Montserrat’, sans-serif;
}

.mini-heading-style {
line-height:1.4em ;
font-size:1.25em ;
}

.search-wrapper-main {
font-family: ‘Montserrat’, sans-serif;
}

.button {
font-family: ‘Montserrat’, sans-serif;
}

.menu-form-block {
font-family: ‘Montserrat’, sans-serif;
}

ol {
font-family: ‘Montserrat’, sans-serif;
}

@media screen and (max-width: 991px) {

}

@media screen and (max-width: 768px) {

}

@media screen and (max-width: 479px) {

.heading-style-4-mobile {
line-height:1.4em ;
font-size:1.25em ;
}

}

1 Like
6

Just back from the holidays and still trying to figure this out. I am one of those actual “no-code” “believers.” @ emetican’s reply above seems to be all that I actually really need, but I tried inserting that as it is into anywhere you’d inject custom code, including in the main site settings for every page and as a test in both the “Inside the tag” and “Before the tag” fields. Clearly, just dropping that in as written doesn’t work. In fact, one of those it just appeared at the bottom of the page as text.

Where should it go? And, does it need special tags around it?

7

It’s CSS, so you wrap it in a <style> element or place it with your other CSS.

It definitely won’t work as-is, at a minimum you need to specify what font you want to use.

Yes no-code is an option to do this, but you’d need to be on an Enterprise plan.

1 Like
8

To achieve this in a simple, clean way—using only CSS—I found a solution that applies the “Cairo” font specifically when the page direction is set to rtl (Right-to-Left), which is commonly used for Arabic.

Here’s how you can do it:

Steps:

  1. Go to your Webflow project’s Project Settings.
  2. Navigate to the Custom Code section.
  3. Add this code snippet into the Head section of your project:
<style>
  /* Load Cairo font for Arabic (RTL) content */
  @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap');
  
  /* Apply Cairo font when the document direction is RTL (Arabic) */
  [dir="rtl"] body {
    font-family: 'Cairo', sans-serif;
  }
</style>