Conditionally loading different fonts in WordPress based on language

When working with a multinational brand it’s a good idea to consider font choice at an identity level to ensure that language support is considered at a branding stage. However, this is not always a possibility or easy to support many languages with a single typeface.

I recently worked on a project that needed to adapt an existing WordPress theme to support English and Arabic versions. TranslatePress was used for the translation functionality but I needed to figure out the best way to switch the typefaces when a user chose either English or Arabic.

My solution

Conditionally loading the font files

The typeface being used on the website for the English version was Montserrat, hosted from Google Fonts. Since this doesn’t support Arabic we decided to load in Noto Sans Arabic from Google Fonts also. The theme properly enqueues the CSS files using a function in the functions.php file. However, when a visitor is using a particular language, we don‘t need the other font. Loading both would be a waste so I needed a way to conditionally load the font files from Google Fonts.

This is the solution I came up with:

// Enqueue CSS
function text_domain_enqueue_css(){ 

  $current_language = get_locale();

  // Load Arabic Google fonts
  if ( $current_language == 'ar' ){
    $google_fonts_link = 'https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@300;400;500;600;700&display=swap';
  
  // Else: use default font stack
  } else {
    $google_fonts_link = 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap';
  }

  wp_enqueue_style( 'fonts', $google_fonts_link, false, null );
  
  // Load extra stylesheets after this

}

// Hook scripts in
add_action( 'wp_enqueue_scripts', 'text_domain_enqueue_css', 999 );

Using the WordPress get_locale() function, I can use the returned string value to conditionally check the locale and load a different set of files from Google Fonts. In my case, I was checking for the Arabic ISO 639-1 2 letter language code which is ‘ar’. If the locale does not match this I can fall back to the normal font stack.

Switching the typeface in CSS based on language

Of course, this is not enough to allow the site to display the website in the correct typeface. We also need to use CSS to set the correct font stack.

I would recommend using CSS custom properties for the best implementation of this. Below is a snippet to show how I easily achieved this.

:root {
	--base-font-stack: 'Montserrat', sans-serif;
}

/* Changes for Arabic */
html[lang='ar'] {
	--base-font-stack: 'Noto Sans Arabic', 'Montserrat', sans-serif;
}

body {
	font-family: var(--base-font-stack);
}

Because the HTML lang attribute is switched in WordPress when the locale is changed we can use this to override the –base-font-stack custom property within the HTML tag — essentially overriding all type on the website to use our new Arabic font stack in this case when the HTML lang attribute has the ‘ar’ value.

The only caveat here is that if you have defined any extra font overrides throughout your stylesheet they would have to be amended also.

Hopefully this works as a nice and easy solution to anyone having a similar requirement.

← Return to blog