Googleが提供している中国語のWebフォントを使う方法

概要
Googleが提供している無料のWebフォントサービスである Google Fonts のアーリーアクセス版に、簡体字中国語と繁体字中国語のフォントがある。これを使えば、Webサイトを見る人の機器に関わらず、同じ中国語フォントで見せることができる。

Google のWebフォントサービス

かつては、Webサイトを見る人が使っているコンピュータに指定のフォントがインストールされていなければ、そのフォントで表示することができなかった。このため、Webサイトを見る人が使っている機器によって、表示されるフォントが違ってしまうという問題が起きた。

しかし、現在ではWebフォントという仕組みがある。これを使えば、Webサイトを見ている人のPCやスマートフォンの中に指定のフォントがインストールされていなくても、そのフォントで表示することができる。

Webフォントサービスには様々なものがあるが、Googleが提供している Google Fonts はその中でも広く使われているものの1つである。これは無料で使用することが可能である。

中国語のフォントは、まだ Google Fonts には正式に導入されてはいない。だが、Google Fonts のアーリーアクセス版から、中国語のフォントが利用できるようになっている。

2016年5月28日現在、簡体字中国語用のフォントが1種類、繁体字中国語用のフォントが6種類利用できる。具体的には以下の通りである。

  • 簡体字中国語
    • Noto Sans SC(思源黑体:简体)
      • ゴシック体に相当
  • 繁体字中国語
    • Noto Sans TC(思源黑體:繁體)
      • ゴシック体に相当
    • cwTeXHei(黑體)
      • ゴシック体に相当
    • cwTeXYen(圓體)
      • 丸ゴシック体に相当
    • cwTeXMing(明體)
      • 明朝体に相当
    • cwTeXFangSong(仿宋體)
      • 宋朝体に相当
    • cwTeXKai(楷體)
      • 楷書体に相当

特に繁体字中国語には様々なフォントが含まれているので、色々な目的に活用できると思う。

ちなみに、Google Fonts のアーリーアクセス版では、日本語フォントも提供されている。その使用法はonzeというサイトの「【Font】Google Web Fonts で日本語フォントの[Noto Sans Japanese]を使う。」という記事を参照のこと。

中国語Webフォントの使い方

Google Fonts のアーリーアクセス版のWebフォントを使いたければ、CSS上で適切な指定を行えばよい。具体的なやり方については、Google Fonts のアーリーアクセス版のページに英語で詳しく書いてある。

基本的に言えば、@import を使って CSSを読み込み、Webフォントを使用したい要素で font-family を指定すればよい。なお、@import はCSSファイルの冒頭に載せないとうまく動かないことがあるので注意が必要である。

簡体字中国語フォント

Noto Sans SC

CSSを以下のように設定すれば、HTMLで notoSansSCクラスの要素が、Noto Sans SC フォントで表示されるようになる。

@import url(http://fonts.googleapis.com/earlyaccess/notosanssc.css);
.notoSansSC{
	font-family: 'Noto Sans SC', sans-serif;
}
Noto Sans SCフォントの表示例
Noto Sans SCフォントの表示例

なお、このフォントは、次に紹介する Noto Sans TCフォントの姉妹版である。同じデザイン思想のもとで作られているので、簡体字と繁体字を併記したい場合は、Noto Sans SC フォントと Noto Sans TC フォントを組み合わせるとバランスがとれると思う。

繁体字中国語フォント

Noto Sans TC

CSSを以下のように設定すれば、HTMLで notoSansTCクラスの要素が、Noto Sans TC フォントで表示されるようになる。

@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);
.notoSansTC{
	font-family: 'Noto Sans TC', sans-serif;
}
Noto Sans TCフォントの表示例
Noto Sans TCフォントの表示例

cwTeXHei

CSSを以下のように設定すれば、HTMLで cwTeXHeiクラスの要素が、cwTeXHei フォントで表示されるようになる。

@import url(http://fonts.googleapis.com/earlyaccess/cwtexhei.css);
.cwTeXHei{
	font-family: 'cwTeXHei', sans-serif;
}
cwTeXHeiフォントの表示例
cwTeXHeiフォントの表示例

cwTeXYen

CSSを以下のように設定すれば、HTMLで cwTeXYenクラスの要素が、cwTeXYen フォントで表示されるようになる。

@import url(http://fonts.googleapis.com/earlyaccess/cwtexyen.css);
.cwTeXYen{
	font-family: 'cwTeXYen', sans-serif;
}
cwTeXYenフォントの表示例
cwTeXYenフォントの表示例

cwTeXMing

CSSを以下のように設定すれば、HTMLで cwTeXMingクラスの要素が、cwTeXMing フォントで表示されるようになる。

@import url(http://fonts.googleapis.com/earlyaccess/cwtexming.css);
.cwTeXMing{
	font-family: 'cwTeXMing', serif;
}
cwTeXMingフォントの表示例
cwTeXMingフォントの表示例

cwTeXFangSong

CSSを以下のように設定すれば、HTMLで cwTeXFangSongクラスの要素が、cwTeXFangSong フォントで表示されるようになる。

@import url(http://fonts.googleapis.com/earlyaccess/cwtexfangsong.css);
.cwTeXFangSong{
	font-family: 'cwTeXFangSong', serif;
}
cwTeXFangSongフォントの表示例
cwTeXFangSongフォントの表示例

cwTeXKai

CSSを以下のように設定すれば、HTMLで cwTeXKaiクラスの要素が、cwTeXKai フォントで表示されるようになる。

@import url(http://fonts.googleapis.com/earlyaccess/cwtexkai.css);
.cwTeXKai{
	font-family: 'cwTeXKai', serif;
}
cwTeXKaiフォントの表示例
cwTeXKaiフォントの表示例