BugWP logo BugWP
Back to Community
Home / Community / Plugin → Translate wordpress with gtranslate

How to Style Your Website Based on Language with GTranslate

33 threads Sep 16, 2025 Plugin → Translate wordpress with gtranslate

Content

Many WordPress users who rely on the 'Translate WordPress with GTranslate' plugin want to customize their site's appearance for different languages. A common request is to change fonts, colors, or layouts based on the active language. This guide explains how to achieve this using CSS.

Why Style by Language?

Different languages can have unique typographic needs. For instance, Arabic script often requires a specific font family and a right-to-left (RTL) layout for optimal readability. The free version of the GTranslate plugin does not add a specific CSS class to the <body> tag for each language. However, it provides a powerful, standard alternative.

The Solution: Use the HTML Lang Attribute

The plugin dynamically changes the lang attribute of your site's <html> tag. This attribute is a reliable and semantic way to target specific languages with CSS. You can use it to create style rules that only apply when a particular language is active.

CSS Examples:

Here is how you can use the lang attribute in your CSS to style content for different languages:

/* Change the font for Arabic language */
html[lang="ar"] body {
    font-family: 'Your Arabic Font', sans-serif;
}

/* Change the font for Spanish language */
html[lang="es"] body {
    font-family: 'Your Spanish Font', serif;
}

/* Apply a background color for French */
html[lang="fr"] .my-section {
    background-color: #f0f0f0;
}

How to Implement This

  1. Identify the Language Code: Find the two-letter code for the language you want to target (e.g., "es" for Spanish, "de" for German).
  2. Add Custom CSS: Navigate to your WordPress Customizer (Appearance > Customize) or your theme's settings page. Look for a "Custom CSS" or "Additional CSS" section.
  3. Paste the Code: Enter your CSS rules using the format shown in the examples above.
  4. Publish: Save and publish your changes.

Troubleshooting and Limitations

  • Cache Issues: If your changes aren't appearing, clear your WordPress cache and your browser cache.
  • Theme Specificity: Your theme's existing CSS might be overriding your new rules. You may need to use more specific CSS selectors or add the !important declaration (use this sparingly).
  • RTL Layouts: Simply changing the font for RTL languages like Arabic or Hebrew is often not enough. Proper RTL support requires a theme that can handle layout mirroring. The 'Translate WordPress with GTranslate' team has stated that full RTL/LTR switching is a feature of their paid version, as it involves complex changes beyond just a CSS direction rule.

By leveraging the html[lang] CSS selector, you can effectively create a multi-lingual design that adapts to your visitors' chosen language.

Related Support Threads Support