無料の日本語ウェブフォントを使ってみました。
ノウハウ
通常、ウェブページで利用されるフォントは、PCにインストールされているフォントを呼び出して表示されるため、場合によっては、デザイナーが意図しないフォントが表示されてしまうケースがあります。ウェブフォントは、この問題を解決するための技術です。今回、無料で利用できる日本語のウェブフォントを実際に使ってみました。
無料で利用できるサービスは2種類
現状、無料で日本語ウェブフォントを利用できるサービスは、株式会社モリサワが提供するTypeSquareと、アドビシステムズのTypekitの2種類。どちらも、1ドメイン1フォントまで利用可能で、TypeSquareは月間1万PVまで、Typekitは月間2万5千PVまでの制約があります。小規模なサイトなら十分に利用できますね。
実際にページを作ってみました。
ウェブフォントを利用する際に気になるのが表示スピード。特に、日本語のウェブフォントの場合、アルファベットよりも読み込むボリュームが大きいため、表示が遅くなる傾向があります。約2000文字のウェブページを用意して、どの程度の時間がかかるのか試してみました。
TypeSquare
使用フォント：凸版文久明朝 R JIS2004
https://yoyakulab.net/reference/typesquare.html ※現在は終了しています。
Typekit
使用フォント：平成明朝std
https://yoyakulab.net/reference/typekit.html ※現在は終了しています。
閲覧環境にもよりますが、TypeSquareは若干チラつきがあり、Typekitは読み込みまでに1秒程度は表示されるようです。
チラつきを改善する方法はないの？
TypeSquareでは、フェードインをつかってチラつきの違和感を解消するためのapiが公開されています。
サンプル：
https://yoyakulab.net/reference/typesquare_api.html ※現在は終了しています。
Typekit には、そういったapiは用意されていないようですので、
別途、スクリプトを書いてフェードインさせたり、フォントの読み込み時間を考慮して、
ローディング表示とするなど、工夫が必要かもしれません。
まとめ
まだまだ課題が残るウェブフォントですが、選択できるフォントの幅が広がるのは大きなメリット。
特に、和風のデザインや、高級感、信頼感の演出を目的として明朝体を利用したいときに、TypeSquareなら、約20種類のチョイスが可能です。
制作案件の仕様に応じて、利用を検討してみるのも良いかもしれません。
