How to change font style for second language in my shop ?

Manu007 · ‎05-12-2025

Hi,

Can someone please help me how can i change the font style and font size in my RTL website so from one side English remain same as before but other language will show in different style and different size?

I'm using Vogal theme version 1.5v

Thanks,

tapan_sain · ‎05-12-2025

You can achieve this using CSS.

You can target different languages using the lang attribute in HTML or by detecting the language direction (dir="rtl" for right-to-left). Vogal theme (like most Shopify themes) supports assigning language attributes on the <html> tag dynamically.

/* Default styles (for English and others) */
body {
  font-family: 'YourDefaultFont', sans-serif;
  font-size: 16px;
}

/* Custom styles for RTL languages (like Arabic, Hebrew) */
html[lang="ar"] body,
html[lang="he"] body,
html[dir="rtl"] body {
  font-family: 'YourCustomRTLLanguageFont', sans-serif;
  font-size: 18px;
}

Tapan sain

Manu007 · ‎05-12-2025

Thank you for your response.

If i will write as you advise then how can i separated between Menu style, Page title or production description style?

Samita-Danny · ‎05-12-2025

Hello

I'm Danny from Samita

You can target each area individually for RTL languages using CSS.

html[dir="rtl"] selector { ... }

Example for product page title:

html[dir="rtl"] .pr_title {
  font-family: 'YourRTLFontHere';
  font-size: 24px;
}

Sami B2B Wholesale — Unlock powerful wholesale features
Sami Request a Quote — Let customers request quotes easily

If our reply helped, please give it a Like or mark it as a Solution!

tapan_sain · ‎05-12-2025

Let’s get this cleaned and structured for you so you can control different font styles for different parts of your site (menu, page titles, product descriptions, etc.) based on language.

Example 1:

/* Default English styles */
.site-nav__link,
.page-title,
.product-single__description {
  font-family: 'YourDefaultFont', sans-serif;
  font-size: 16px;
}

/* RTL language styles (like Arabic) */

/* Menu */
html[lang="ar"] .site-nav__link {
  font-family: 'Cairo', sans-serif;
  font-size: 18px;
}

/* Page title */
html[lang="ar"] .page-title {
  font-family: 'Cairo', sans-serif;
  font-size: 24px;
}

/* Product description */
html[lang="ar"] .product-single__description {
  font-family: 'Cairo', sans-serif;
  font-size: 17px;
  line-height: 1.8;
}

Example 2:

html[lang="ar"] .site-nav__link,
html[dir="rtl"] .site-nav__link {
  font-family: 'Cairo', sans-serif;
}

Tapan sain

How to change font style for second language in my shop ?

How to change font style for second language in my shop ?

Community Blog Articles