Google font : English and Arabic

Hi,

Firstly, I would like to thank you for the theme and really make thing easy for me.

I have a question please, I am using Woodmart for two different languages {Arabic (RTL )and English (LTR)}.

I have a little issue, I am using a different Google font, Arabic I am using “Tajawal” font and for English version I am using “Nunito” by editing the CSS, and I am sure I am messing many things is CSS, and I am afraid not all the Arabic version is well setting up for that Google font.

My request is, how could I use different Google font for English and for Arabic? Can you please help me to generate an Arabic CSS code to insert it to the theme?

Have a nice day

Hello,

Please, send us your admin access so we can check your current configuration and see what would be the best way to have two fonts in different languages.

Kind Regards

Sure,

Hi,

Try to add the following code snippet to the Custom CSS area in Theme Settings to fix this issue.

/* arabic */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/tajawal/v8/Iura6YBj_oCad4k1nzSBC45I.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
}
/* latin */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/tajawal/v8/Iura6YBj_oCad4k1nzGBCw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/tajawal/v8/Iurf6YBj_oCad4k1l8KiHrRpiYlJ.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
}
/* latin */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/tajawal/v8/Iurf6YBj_oCad4k1l8KiHrFpiQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/tajawal/v8/Iurf6YBj_oCad4k1l4qkHrRpiYlJ.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
}
/* latin */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/tajawal/v8/Iurf6YBj_oCad4k1l4qkHrFpiQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

[dir="rtl"] .wd-nav-main > li > a, .wd-nav-secondary > li > a,
[dir="rtl"] .title, .woocommerce-Reviews .comment-reply-title, h1, h2, h3, h4, h5, h6, legend, 
[dir="rtl"] body {
	font-family: Tajawal;	
}

Kind Regards

Hi dear,

Many thanks for your help and your support.

I really appreciate the time you spend to create that CSS for me, I can’t thank you enough.

The code works perfectly, but there are some pages some elements still using the default font.

Please check the url :

Hi,

Try change font on accordion elements try to replace previous custom code with the following one:

/* arabic */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/tajawal/v8/Iura6YBj_oCad4k1nzSBC45I.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
}
/* latin */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/tajawal/v8/Iura6YBj_oCad4k1nzGBCw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/tajawal/v8/Iurf6YBj_oCad4k1l8KiHrRpiYlJ.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
}
/* latin */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/tajawal/v8/Iurf6YBj_oCad4k1l8KiHrFpiQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/tajawal/v8/Iurf6YBj_oCad4k1l4qkHrRpiYlJ.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
}
/* latin */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/tajawal/v8/Iurf6YBj_oCad4k1l4qkHrFpiQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

[dir="rtl"] .wd-nav-main > li > a, .wd-nav-secondary > li > a,
[dir="rtl"] .title, .woocommerce-Reviews .comment-reply-title, h1, h2, h3, h4, h5, h6, legend, 
[dir="rtl"] body,
[dir="rtl"] .wd-accordion-title,
[dir="rtl"] .wd-accordion-content {
	font-family: Tajawal;	
}

[dir="rtl"] .vc_toggle_size_md.vc_toggle_default .vc_toggle_content, [dir="rtl"] .vc_toggle_size_md.vc_toggle_default .vc_toggle_title, [dir="rtl"] .vc_toggle_size_md.vc_toggle_round .vc_toggle_content, [dir="rtl"] .vc_toggle_size_md.vc_toggle_round .vc_toggle_title, [dir="rtl"] .vc_toggle_size_md.vc_toggle_rounded .vc_toggle_content, [dir="rtl"] .vc_toggle_size_md.vc_toggle_rounded .vc_toggle_title, [dir="rtl"] .vc_toggle_size_md.vc_toggle_simple .vc_toggle_content, [dir="rtl"] .vc_toggle_size_md.vc_toggle_simple .vc_toggle_title, [dir="rtl"] .vc_toggle_size_md.vc_toggle_square .vc_toggle_content, [dir="rtl"] .vc_toggle_size_md.vc_toggle_square .vc_toggle_title {
	padding-left: 0;
	padding-right: 33px;
}

[dir="rtl"] .vc_toggle_title .vc_toggle_icon {
	left: auto;
	right: 0
}

The menu became smaller.

Menu font size depends on the initial font family that you have chosen.

Kind Regards

Thank you so much, your for your help.

I really appreciate what you did for me.

Thank you one more time.

You are the best

You are always welcome! Feel free to contact us if you have any extra questions.

[Author]

Posts