かつてはブラウザの実装がなかなか追いつかず、使いたくても使えなかったWebフォントですが、近年ブラウザが対応するにつれ、採用するWebサイトもだんだん増えてきました。
とはいえ、フォントを購入するなり無償配布のものをダウンロードするなりしてサーバへ設置して設定をするのは、なかなか面倒なものですよね。
そんな時、強い味方になるのは例によってわれらがGoogle先生。
オープンソースで商用利用可能なWebフォントを700以上も取り揃えた、Google Fontsというサービスを提供しています。
今回はこのサービスを使って、Webフォントを取り入れる手順を紹介したいと思います。
使い方その1：フォントセットを作る
まずはGoogle Fontsのサイトへアクセスしましょう。
ここで利用したいフォントを探します。
左ナビにあるFilters:の中にある項目を操作すると、フォントの種類で絞っていくことができるので、イメージにあったものが見つけやすくなります。
例えばフォントのタイプを「Handwriting」だけにすると、手書き風のフォントだけに絞り込まれます。
その下にある項目はそれぞれ、「Thickness」が太さ、「Slant」は文字の傾斜で「Width」は文字間の幅だと思いますが（間違ってたらスミマセン）、項目の意味は分からなくても、スライダーを適当に操作してみればリアルタイムで一覧が変わっていくので、直感的に操作できるのではないかと思います。
また一覧の上にあるタブを切り替えると、プレビューで表示される時のレイアウトを単語や一文、段落などの形式に切り替えてくれますので、実際にページで使用した時の感じがつかみやすくなるかと思います。
とりあえず今回は、わかりやすいところで手書き風のフォントに絞っていくつか選択してみました。
使いたいフォントの右にある「Add to Collection」をクリックすると、ページ下にあるCollectionというところにフォントが追加されます。
ここをクリックして開くと、選択したフォントが入っているのがわかります。
使い方その2：作ったフォントセットのコードを発行する
Collectionを開いたところで、右下にある「Use」をクリックすると、設定画面に切り替わります。
ここでは選んだフォントのウェイトや文字セットを選びます。
読み込むフォントの種類が多すぎると、Webサイトに反映されるのに読み込み時間が余計にかかってしまうので、必要なウェイトや文字セットに絞って選択するのがよいでしょう。
チェックボックスを操作すると右側にあるロード時間の目盛が変化するので、これを目安にするのがよいと思います。
インジケーターが緑の枠を出ない位であれば、だいたい大丈夫じゃないでしょうか。
選択が終わると、ページ下にコードが生成されます。
htmlの<head>内に読み込んで使う場合はStandardを使用します。
<link href='http://fonts.googleapis.com/css?family=Indie+Flower|Pacifico' rel='stylesheet' type='text/css'>
cssの中に記述する場合は、@importで表示されるコードをcssの中に追記します。
@import url(http://fonts.googleapis.com/css?family=Indie+Flower|Pacifico);
Javascriptを使用した記述方法も用意されています。
ブログの特定の記事だけで使用したい場合などは、こちらを使うとよいかもしれません。
今回の記事ではこのコードを使用してみます。
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Indie+Flower::latin', 'Pacifico::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
上のコードを記事内に張り付けて、フォントを適用したいテキストにfont-familyを適用してみます。
font-familyの記述はそれぞれこんな感じ
font-family: 'Indie Flower', cursive;
font-family: 'Pacifico', cursive;
Indie Flower
Pensees online PR solutions: transforming your company's website into a media platform
Covered By Your Grace
Pensees online PR solutions: transforming your company's website into a media platform
それぞれ適用したフォントが適用されていますね。
たった数行のコードを追加するだけでWebフォントを使うことができました。
使い方その3：日本語フォントも使いたい
Google Fontsの公式サイトを言語で検索しても、日本語フォントはまだ用意されていないので出てこないのですが、実はアーリーアクセス版として用意されています。
Googleが開発した日本語フォントという事で、発表された時ちょっと話題になったので、知ってる人も多いかもしれませんね。
アーリーアクセス版なので今後APIのURLが変わる可能性はあるのですが、こちらも他のWebフォント同様サイトに読み込んで使うことができます。
さきほどのページにあるコードを参考に使ってみます。
今回は無理やり記事内に<style>で入れてしまいましたが、実際に使う場合は<head>内に読み込んで使う方がよいかと思います。
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
Noto Sans Japanese
私たちは、"伝わる" Webサイトづくりを提案します。
こちらも簡単に設定できました。
評判通りなかなか綺麗ですね。
まとめ
いかがだったでしょうか。
Google Fontsのサイトに行けば、わずか数ステップで様々なWebフォントを利用する事ができますね。
Webフォントを使う際の壁になっていた日本語フォントも、Google先生のおかげで道が開けてきたので、もうちょっと気軽に使えるようになってくればなあと思います。
