How to change the default font family when locale changes using tailwind&nuxtjs?

Question

I've a bilingual (Arabic and English) website built with nuxtjs and tailwind, arabic is rtl language.

tailwind.config.js file:

theme: {
  extend: {
    fontFamily: {
      sans: ['Open Sans', 'sans-serif', 'Ubuntu'],
      notoKufi: ['Noto Kufi Arabic'],
    }
  }
}

What I want to accomplish is changing the default font family in tailwind when user changes the locale/direction of the website.

I've read the docs, and tried Customizing the default font section and added this code to css

[style*="direction:rtl"]{
   font-family: Noto Kufi Arabic
}

[style*="direction:ltr"]{
   font-family: Open Sans
}

but nothing changed.

Did you tried with @apply font-sans; rather than font-family: Open Sans ? Also, what do you see in the DOM? Is it not applied? — kissu, Commented Dec 28, 2022 at 22:22
@kissu, where exactly should i add @apply font-sans, however I feel that the problem is to make font-sans refers to Open Sans when En is chosen and Noto Kufi when Ar is chosen, is there any way to accomplish this? — Abdelrhman Gad, Commented Dec 29, 2022 at 9:49
I wrote where, replace (regarding your initial snippet) in the CSS file. For that, you could probably have a computed regarding the locale of your website IMO. I'm not sure under which conditions your CSS selector is applied but working around that may be a good start. — kissu, Commented Dec 29, 2022 at 10:24

Abdelrhman Gad · Accepted Answer · 2022-12-31 17:37:01Z

2

I've found a solution to change the font-family according to the selected locale using tailwind.

At a global.css file I added this code

@tailwind base;

*[dir='ltr'] {
   @apply font-openSans !important;
 }

*[dir='rtl'] {
   @apply font-sans !important;
 }

and when changing the locale I use this.$route.path.includes('en') to set HTML current direction to ltr

answered Dec 31, 2022 at 17:37

Abdelrhman Gad

3153 silver badges16 bronze badges

1

Glad that my approach worked. @apply !font-openSans should also work, as explained here.
– kissu
Commented Dec 31, 2022 at 17:42

Add a comment |

1 Answer 1