多言語サイト作成時のフォント指定の注意点


flickr photo shared by Jirka Matousek under a Creative Commons ( BY ) license

多言語化サービスを作成していてちょっと躓いた事があったので共有です。

多言語サイトを作成しているとその地域に合わせたフォントを指定するとユーザーにとって違和感なくサイトを使うことができると思います。
(海外のサイトで日本語対応してるサイトがあっても変なフォントの場合とかテンション下がりますよね!)

そこでIPアドレスから地域を判別してその地域のフォントに合わせればいいかというとそれだけではうまくいきません。

必要なのは2つです。

  1. htmlのlang属性を指定する
  2. font-familyに最適なフォントを指定する

僕はこの中の2番しか対応しておらず

「font-familyを指定してるのになんでfont変わんないの?dev toolsで見ても普通に指定されてるし。むむむ。。。」

という状態が続いていましたorz

それでは1つずつ解説します。

まず、今回の例では

この4つの言語に対応してみたいとします。

1.htmlのlang属性を指定する

html5に対応しているwebサイトであればwebページの書き出しは

で始まりますよね。

これの

この部分のlang属性の値を変えます。

今回の例で言うと

こうなります。

なので簡体中文圏に対応したい場合は上記コードを修正して

というふうに修正しましょう。

2.font-familyに最適なフォントを指定する

※「最適なフォント」と見出しに記述してありますが、各々のサービスで最適なフォントを選んで下さい。
これはcssで

というふうに各言語ごとにfont-familyを指定してあげましょう。

まとめ

この2つの方法で各地域ごとに正しいフォントを指定することができます。

僕はfont-familyしか変えていなかったので正しい挙動が起きずぐぬぬっとなっていました。

グローバルなサービスを作る際には必ず必要な処理だと思うので何かの役に立てれば光栄です。

スポンサーリンク