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

Shopify Discussion
1

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,

2

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 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;
}
3

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?

4

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;
}
5

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;
}