1

I am using wordpress with elementor pro and wpml, i use English and Arabic language, for Arabic i want to use another font-family handled by Elementor (google font), but when i try to implement it it does not work. I folloewd alla recommandation from wpml ro elementor (regenerate css), adding custom css in theme => customization or in wpml languages menu => Aditional CSS

html:lang(ar) * {
  font-family: "Noto Kufi Arabic",Arial,Lucida,sans-serif!important; 
}

or

html:lang(ar) {
  font-family: "Noto Kufi Arabic",Arial,Lucida,sans-serif!important; 
}

or

html[lang="ar"] * {
 
font-family: 'Noto Kufi Arabic',Arial,Lucida,sans-serif !important;
    color:red!important;
 
}

when i change text color it is working, it means css custom is detected

So why font is not changed, i tried other fonts but with no success

what is really strange even in computed we see the right font but not displayed ! enter image description here

cyril
  • 872
  • 6
  • 29

1 Answers1

0

So, when you have elementor all fonts embedded are not embedded in wordpress, so i had to add the font in custom style.css and add the custom css.

In the child theme style.css add this (or in website customization part):

@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;700&display=swap');

html[lang="ar"] * {
 
font-family: "Noto Kufi Arabic",sans-serif !important;
 
}
cyril
  • 872
  • 6
  • 29