無料の日本語ウェブフォントを使ってみました。

通常、ウェブページで利用されるフォントは、PCにインストールされているフォントを呼び出して表示されるため、場合によっては、デザイナーが意図しないフォントが表示されてしまうケースがあります。ウェブフォントは、この問題を解決するための技術です。今回、無料で利用できる日本語のウェブフォントを実際に使ってみました。

無料で利用できるサービスは2種類

現状、無料で日本語ウェブフォントを利用できるサービスは、株式会社モリサワが提供するTypeSquareと、アドビシステムズのTypekitの2種類。どちらも、1ドメイン1フォントまで利用可能で、TypeSquareは月間1万PVまで、Typekitは月間2万5千PVまでの制約があります。小規模なサイトなら十分に利用できますね。

実際にページを作ってみました。

ウェブフォントを利用する際に気になるのが表示スピード。特に、日本語のウェブフォントの場合、アルファベットよりも読み込むボリュームが大きいため、表示が遅くなる傾向があります。約2000文字のウェブページを用意して、どの程度の時間がかかるのか試してみました。

TypeSquare
使用フォント:凸版文久明朝 R JIS2004
http://yoyakulab.net/reference/typesquare.html

Typekit
使用フォント:平成明朝std
http://yoyakulab.net/reference/typekit.html

閲覧環境にもよりますが、TypeSquareは若干チラつきがあり、Typekitは読み込みまでに1秒程度は表示されるようです。

チラつきを改善する方法はないの?

TypeSquareでは、フェードインをつかってチラつきの違和感を解消するためのapiが公開されています。

サンプル:
http://yoyakulab.net/reference/typesquare_api.html

Typekit には、そういったapiは用意されていないようですので、
別途、スクリプトを書いてフェードインさせたり、フォントの読み込み時間を考慮して、
ローディング表示とするなど、工夫が必要かもしれません。

まとめ

まだまだ課題が残るウェブフォントですが、選択できるフォントの幅が広がるのは大きなメリット。
特に、和風のデザインや、高級感、信頼感の演出を目的として明朝体を利用したいときに、TypeSquareなら、約20種類のチョイスが可能です。
制作案件の仕様に応じて、利用を検討してみるのも良いかもしれません。

この記事の著者、最近書いた記事

下田敦

クラウド型予約システムを販売するリザーブリンクでフロントエンド、製品サイトの運営・管理を行っています。予約システムを利用するサービス全体を向上するハックなどをご紹介します!

カテゴリから探す

予約ラボについて