Multilingual website with distinct font types

Question

I'm developing my website with Umbraco, and I need it to be multilingual with both english and chinese. To make my website multilingual with Umbraco I basically have the website cloned and then changing the contents, but keeping all the html and css templates. But for the chinese version I will need to use a different font type, how can I do this? Is it possible to specify which font to use in the CSS? Or any other solution?

Thank you very much!

You mean a different font _family_? If so, read [`unicode-range`](https://developer.mozilla.org/en/docs/Web/CSS/@font-face/unicode-range) which is what you need. — Mr Lister, May 27 '16 at 08:42
But if that's not what you meant, please explain what you do need; what goes wrong. Browsers are usually pretty good at displaying Chinese characters without having to take special measurements. — Mr Lister, May 27 '16 at 08:43

score 1 · Answer 1 · answered May 27 '16 at 08:46

1

Can't you add a class to the body based on the language? For example en for English and cn for Chinese? Then you can target body.en and body.cn and add different fonts based on those.

Example:

body.cn {
   font-family: 'chinese font';
}

body.en {
   font-family: 'english font';
}

answered May 27 '16 at 08:46

Rvervuurt

8,589
8
39
62

The html file is the same for both, that would work if I had 2 different html files, I think. Unless I'm not really understanding your answer. – Joao Guimaraes May 27 '16 at 08:49
You can probably let Umbraco add the class, based on what language is being shown. There must be a `if (*check for language*) { do something }` in Umbraco. See it as Wordpress adding `home`, `post` and `page` to the `body` class, depending on what page you are viewing. That way, you can write very specific CSS. – Rvervuurt May 27 '16 at 08:57
1

You will have to change your template somehow. What @Rvervuurt suggests is a very simple addition to the body tag, something like (but I don't know your Umbraco version or how your templates/views are set up, so it's an approximation). – Jannik Anker May 27 '16 at 08:59
Oh ok, I understand now! It looks like a simple solution, I'll try it! – Joao Guimaraes May 27 '16 at 09:23

John Shang · Answer 2 · 2016-05-27T09:16:49.380

body,
button,
input,
select,
textarea {
  color: #2b2b2b;
  font: 12px/1.5 "Hiragino Sans GB", Tahoma, Arial, Microsoft YaHei, "微软雅黑", "Helvetica Neue", sans-serif;
  *font-family: "Hiragino Sans GB", Microsoft YaHei, "微软雅黑", Tahoma, Arial, "Helvetica Neue", sans-serif;
}

Put your english font-family before chinese, so chinese computer only recongnize the chinese font-family and ignore the english font-family.
I am a web developer form China, Chinese font-family is very little:
1. 微软雅黑(microsoft yahei)
2. 宋体(simsun)
3. 黑体

score 0 · Answer 3 · answered Jun 14 '16 at 08:01

Use the Culture to add the "lang"-attribute to the HTML-tag, then in the CSS, select it by using html[lang="CULTURE"]. So for English, you use e.g. "en-GB", producing the following:

Razor (layout page):

<html lang="@Culture">
</html>

CSS:

html[lang="en-GB"] { font-family: 'WhatEverFont', sans-serif; }

Or, you can achieve this by adding the Culture as a class to your body, e.g.:

Razor (layout page):

<html lang="@Culture">
  <body class="@Culture.ToLower()">
  </body>
</html>

CSS:

body.en-gb { font-family: 'WhatEverFont', sans-serif }

Multilingual website with distinct font types

3 Answers3