Different fonts for different languages – but not using any multilingual plugin

[Rachel]

Hi,

I have a website with both English and Chinese font in the same paragraph and I’d like to use a different font for each language. I wanted Nunito for English and NotoSans for Chinese. I’ve been trying the following in my CSS:

@font-face {
  font-family: 'NotoSans';
  src: url('fonts/chinese/NotoSansCJKtc-Thin.otf') format('opentype');
  font-weight: 200;
  unicode-range: U+4E00-U+9FFF, U+3400-U+4DBF, U+2B740–U+2B81F; /* CJK unicode */
}

with also –

body { 
  font-family: "NotoSans", "Nunito";
}

But everything just defaults to NotoSans…

then I tried to update that to:

body { 
  font-family: "NotoSans", inherit;
}

and everything defaults to Nunito.

Any suggestions besides wrapping certain text blocks in a span?

[Tom]

Hmm, wrapping certain text in a <span> element is the only way I can think of, but I don’t have a huge amount of experience with multilingual sites.

I don’t think it’s possible to do it the way you’re outlining above. The one font you’re using would need to support both languages.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Rachel]

Thanks, Tom.

Is it possible to remove the Google Font Nunito from WordPress (one that appears in Customizer) and replace it with with a local version of it? Both Noto Sans and Nunito support both languages so I’m wondering if I could uploaded a version with just Latin glyph?

[David]

Hi there,

yes you can serve the fonts locally – this article explains:

https://docs.generatepress.com/article/adding-local-fonts/

Just a though considering Nunito supports both languages, then maybe try serving both of them locally and setting separate unicode-ranges for each

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Rachel]

Hi David,

Came back to work on your idea – I’m slowly working through it (had a big break..). Thank you for the suggestion. Would it be possible to add a fallback font to it? Like it to fallback to generic Sans-Serif, for example.

PS noticed on site this is made from Vancouver Island?! Where??

[Tom]

You should be able to add the fallback into the @font-face reference, and in the PHP filter (so they match).

We’re based in Victoria 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts