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種類利用できる。具体的には以下の通りである。

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

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

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

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

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 TCフォントの姉妹版である。同じデザイン思想のもとで作られているので、簡体字と繁体字を併記したい場合は、Noto Sans SC フォントと 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;
}

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

@import url(http://fonts.googleapis.com/earlyaccess/cwtexhei.css);
.cwTeXHei{
	font-family: 'cwTeXHei', sans-serif;
}

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

@import url(http://fonts.googleapis.com/earlyaccess/cwtexyen.css);
.cwTeXYen{
	font-family: 'cwTeXYen', sans-serif;
}

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

@import url(http://fonts.googleapis.com/earlyaccess/cwtexming.css);
.cwTeXMing{
	font-family: 'cwTeXMing', serif;
}

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

@import url(http://fonts.googleapis.com/earlyaccess/cwtexfangsong.css);
.cwTeXFangSong{
	font-family: 'cwTeXFangSong', serif;
}

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

@import url(http://fonts.googleapis.com/earlyaccess/cwtexkai.css);
.cwTeXKai{
	font-family: 'cwTeXKai', serif;
}