WP サイト表示をWEBフォント仕様に変更するTIPS
@inmycabサイト表示をWEBフォント仕様に変更しました。これで基本的にはPCやブラウザによらずCSS設定の”SourceHanSans（Adobe-Google共同開発のオープンソースフォント）”で同じように表示されてるはずです。
日・中・韓、三ヶ国語を同じフォントで表示できる
”SourceHanSansフォント”
本日サイト訪問された方、これから初めてサイト訪問される方、文字が表示されるまでしばし我慢の時間が必要だったはずです。ボディーコンテンツ全ての文字を 16MB超もあるサーバー上の”SourceHanSansフォント”で表示させようというのだから、まぁそれくらいは掛かります。ただ一度訪問いただければ新設のフォントキャッシュ設定が効果的に働いて、WEBフォント仕様にする前より高速に表示してくれます。
このサイトではWEBフォントとして”SourceHanSans_OTF”を使っていますが...お仕事（日中韓・多言語サイト用）向けの試験を兼ねてます。これを使うと日本語・中国語・ハングルが混在した文章でも違和感がないという優れものでもあります。フツーは日本語だけの”SourceHanSans_JP”を使えばじゅうぶんです。
<WordPressでWEBフォントを使う設定>
■WEBフォント(Web Open Font Format)へ変換します。
SourceHanSans_OTF”はOpenType Fontなので、Web Open Font Formatに変換してやる必要があります。そこで武蔵システムさんが無償提供している”WOFFコンバータ”を使います。
| SourceHanSans-Bold.otf SourceHanSans-ExtraLight.otf SourceHanSans-Heavy.otf SourceHanSans-Light.otf SourceHanSans-Medium.otf SourceHanSans-Normal.otf SourceHanSans-Regular.otf |
|
フォントウエイトは7種類 |
■WEBフォント（.wof形式）をサーバーへアップロードします。
WordPressのテーマフォルダ内に「woffont」フォルダを作成して使用するフォント種類（.wof形式）をアップロードします。
■スタイルシートにフォントファミリーの読み込みを追記します。
| @font-face{font-family: wofr; src: url('woffont/SourceHanSans-Regular.wof'); format('woff'); } @font-face{font-family: wofb; src: url('woffont/SourceHanSans-Bold.wof'); format('woff'); } |
このサイトでは２種類のフォントの割り当てを使い分けています。
■.htaccessにフォントキャッシュ設定を記入
| #MIMEタイプ AddType application/vnd.ms-fontobject .eot AddType application/x-font-ttf .ttf AddType application/x-font-opentype .otf AddType application/x-font-woff .woff AddType image/svg+xml .svg <ifModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 1 seconds" ExpiresByType application/vnd.ms-fontobject "access plus 1 year" ExpiresByType application/x-font-woff "access plus 1 year" ExpiresByType image/svg+xml "access plus 1 year" </ifModule> |
WordPressのキャッシュプラグインをあてにしてはいけません。最後の一手間でぐんと表示速度は改善されます。
そもそも1000ページを超えてるこのブログコンテンツのメイン表示を、3ヶ国語対応のフル実装フォントを使ってWEBフォント表示するというのが無謀...と思っていたのですが、表示速度の低下は（初回アクセスを除けば）そうでもないです。加えて実験用に50個以上の機能拡張プラグインが稼働していることを考えると、サーバーは頑張ってるなぁ...です。
