noteで書く今日は、Webフォントのお話しを。Web担で初めてWebフォントを使ってみたのですが、予想どおり転送量が大きくてページ表示が重くなるので、できるだけ表示が快適になるように工夫してみました。脱・新人Web担!あずさのWeb担当者日記という新コーナーで、Webフォントを使いました。イベントなどでも女性Web担当者の数が増えていることから、現場の女性の方に執筆を依頼し、担当編集者も女性にして、女性向けの記事として作ってもらったら、「女性誌っぽいデザインにしたい」ということで、Webフォントを使うことになったのです。どれぐらい重いかというと、HTMLやCSSやJSや画像を全部あわせても740Kバイトぐらいなのに、フォントファイル1つで3.2Mバイトもあるのです!Webフォントを使ってもできるだけページ表示を軽くするための注意点や工夫点をお伝えします。この記事の内容ポイント1:本当に効果的なところ以外では使わないポイント2:Webフォントは圧縮するポイント3:ブラウザ側でキャッシュできるようにするポイント4:Webフォントの適用を遅らせるポイント5:ローカルの校正HTMLファイルでは適用できないポイント1:本当に効果的なところ以外では使わないなので、第1のポイントは「本当に効果的なところ以外では使わない」こと。最初はタイトルや見出しなどにもWebフォントを使っていたのですが、デフォルトの表示と大きく変わるわけではないので、そこはWebフォントの適用を中止しました。ポイント2:Webフォントは圧縮する今回利用したWebフォントは、3.2Mバイトのサイズがあります。そのまま転送すると600ミリ秒~1秒の時間がかかります(他の環境やモバイルなどではもっとかかります)。Webサーバー側で圧縮した状態で送り出すことで、転送サイズを減らしましょう。そのためには、.htaccessなどで次のような指示をします(Webサーバーでmod_deflateが有効になっている必要あり)。application/font-woff</IfModule>これで、Webフォントへのアクセスは自動的にWebサーバーが圧縮して転送してくれ、転送量が2.3Mバイト、転送時間は450ミリ秒~800ミリ秒になりました。毎回の圧縮処理が入るとアクセスが多いときには負荷になるだろうと、あらかじめgzip圧縮したフォントファイルをサーバー上の同じ場所に作っておいて、圧縮ファイルがある場合はそちらを転送するようにしました。[L,QSA,T=application/font-woff,E=no-gzip:1]</IfModule>Webフォントは正しいコンテントタイプをHTTPヘッダーで返さないとブラウザがWebフォントとして扱ってくれない場合があります。最初、そこにハマりました。RewriteRuleのTフラグでコンテントタイプを指示できると思ったのですが、うまくいかなかったので、結局次のようにしてForceTypeディレクティブで強引に上書きしています。このあたりはもう少し調べてみます。application/font-woff</FilesMatch>ちなみに、最初にテストしたときはWebサーバーによる圧縮に時間がかかっているように見えたのですが、いまチェックしてみると、mod_deflateで圧縮した場合と比べて、特にリクエストに対する反応時間は変わっていませんでした。圧縮済みファイルを置いておく効果はほとんどないかもしれません(アクセスが多い時間帯だと変わるのかな)。gzipで圧縮する際に最高圧縮率に設定したので4Kバイトほと節約できているのがメリットでしょうか。400ms~800msポイント3:ブラウザ側でキャッシュできるようにする重いWebフォントファイルを何度もWebサーバーから取得する必要はありません。一度表示したWebフォントは、ブラウザがキャッシュして二度とサーバーに読みに行かないようにしましょう。A25920000</FilesMatch>これで、一度Webフォントファイルにアクセスした時点から300日間は、同じURLのフォントファイルを参照する場合でもサーバーに読みに行かずにローカルのキャッシュを使ってくれます。ポイント4:Webフォントの適用を遅らせるそれでもやはりフォントの処理で1秒ぐらい余分にかかるのでWebフォントの適用をページ表示から少し遅らせることにしました。@font-faceの定義を独立したCSSファイルに移動してそのファイルはページから直接には読み込まないようにすることで、ページを表示しただけではフォント定義が読み込まれないようにします(つまりフォントファイルにもアクセアスしない)。Loaderを使って、ページ表示が完了してから遅らせてフォントを適用します。);});</script>この例では、ブラウザがページ表示を構築してから5秒後にWebフォントを適用しています。ポイント5:ローカルの校正HTMLファイルでは適用できないWebフォントは原則として「同じドメイン名じゃないと使えない」ものです。いうことかというと、Web担のサーバーに置いてあるWebフォントファイルは、Web担のサーバー上のHTMLファイルからでないと使えないのです。ふだんはそれで問題ないのですが、校正用HTMLをHTMLファイルで関係者に送って確認してもらう場合には、その校正HTMLファイルをローカルにダウンロードして開いてもWebフォントが反映されません。同じサーバーにあるHTML以外からもWebフォントを使えるようにするには、HTTPヘッダーでそれを指示しなければいけません。具体的には、.htaccessなどで次の命令を記述します。*</FilesMatch>外部サーバーが決まっている場合はそのサーバー名を記述すればいいのですが、前述のようなローカルにダウンロードしたHTMLファイルの場合は、さまざまなブラウザで使えるようにするには上記の記述が必要になります。すると、だれでもそのWebフォントを使えるようになってしまう点に注意が必要です。Web担では上記の指示は入れていません。「Web担当者Forum」編集長。個人としては、技術とマーケティングの融合によるインターネットのビジネス活用の新しい姿と、ブログ/CGM時代におけるメディアのあるべき姿を模索し続けている。趣味は素人プログラミングと上方落語と南インドカレー。AdWordsが消滅、18年の歴史を終え「Google広告」へ。最近(過去90日間)の記事で、Facebookの「いいね!」が多かった記事をお見逃し無く。ネット広告への強い嫌悪感、テレビや新聞の倍以上に。いいね!伝説のTwitter企業アカウント“中の人”の先駆け。いいね!私は変人コレクター。ビジネス成果に貢献する5つのTips売上が伸びるECサイトの必須条件。行動ターゲティングネット広告の種類の1つ。Patterns』を3名様にプレゼント!【受付終了】企業がDXに向かう取り組み方を考える『デジタルファースト・ソサエティ』を3名様にプレゼント!すべて見るインフォメーションWeb担のメルマガを購読しませんか?Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。編集後記サイトマップFAQ(よくある質問とその答)Web担に広告を掲載しませんか?購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。