SOLVED: Polylang theme style issue

Bugs
1

Bricks Version: 1.5.7
Browser: Chrome 90

Hi im using polylang for RTL (Persian) website to add English language, so i have to use English font as well

I duplicate my main theme style and add English font to use it for the second language pages
But it applied to both languages and my fonts just messed up

1 Like
2

I usually do it using CSS, here is how:

  1. Decide which language is the default one, let’s say Persian.
  2. Choose the default font for the default language from the theme settings, (e.g. Vazir font for Persian).
  3. If you don’t have a child theme, find a way to write some CSS that applies globally.
  4. If you have a child theme, target the classes you want to apply the font-family on it with the language attribute like this:
    html[lang="en"] h1 { font-family: Montserrat, sans-serif; }

Hope this help.

3 Likes
3

This is the case with using WPML.

The correct way to target a language with Polylang by “:lang(ar)” or “:lang(en)…”
e.g.

h1:lang(ar) {
  font-family: 'Montserrat' !important;}

Here:
https://polylang.pro/doc/can-i-use-different-designs-for-different-languages/

I’ve designed an entire RTL/LTR website, targeting each element I need using the same method above.
But I’ve never used more than one font for both languages.

P.S. If got time, I’ll try to test it by using a font for each language.

3 Likes
4

Hi Mehdi,
Thanks so much for your report!

I think the simplest option is the one mentioned by Hassan and Kareem. Assigning different theme styles should also work, but you would have to assign each individual page and exclude it in the other theme style, which quickly ends in chaos.

Alternatively to the suggestions above, you can also keep it more general, as the language is output in the HTML tag. Example for German:

html[lang=“de-DE”] * {
font-family: Arial;
}

Best regards,
timmse

2 Likes
5

Thanks guys for your great solutions
I use the code suggested by @kareem in the child theme and it worked

h1:lang(en),h2:lang(en),h3:lang(en),h4:lang(en) {
	font-family: 'Philosopher' !important;
	font-weight: 700 !important;
	font-style: italic !important;
}
body:lang(en){
  font-family: 'Poppins' !important;}

but html[lang=“en”] does not work for polylang.

2 Likes
6

GREAT to hear :slight_smile: Good luck bro…

but html[lang=“en”] does not work for polylang.

@timmse mentioned the way WPML works:
e.g. Here :point_down:
https://wpml.org/forums/topic/use-different-css-styles-on-different-languages/

The way to target a language in CSS in Polylang as I mentioned above.

Kind Regards

2 Likes
7

Hi
This works for me in WPML in case anyone needs it.

*:lang(en-US) * {
font-family: Arial;
}

Kind Regards