Archived topic

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

5 replies · Started by Rachel on September 28, 2019

Viewing posts 1–6 of 6

September 28, 2019 at 2:52 am #1021123

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?

September 28, 2019 at 9:42 am #1021364

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.

September 28, 2019 at 11:11 pm #1021618

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?

September 29, 2019 at 4:37 am #1021720

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

October 28, 2019 at 10:33 am #1047033

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??

October 28, 2019 at 4:10 pm #1047297

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 :)

This archived topic is closed to new replies.

Start building better websites today.