[Webフォント]意外と簡単！フォントを自分でアップロードしてWebフォント化する手順

最近ではフリーでも日本語フォントが色々出てきているようですね。
そんな恵まれたこのご時世、Webフォントを導入して差別化したい！可読性を高めたい！と考える運営者様も多いのではないでしょうか。

Webフォントを使うには

Webフォントを導入する方法としては、
Google FontsやFONTPLUSのようなWebサービスを使う方法と、
自分でフォントをサーバーにアップロードして使う方法の2種類があります。

Webサービスを使うメリットとしては、導入が凄く楽という事です。
タグを発行してあとはcssでフォントを指定するのみです。

自分でWebフォントをサーバーにアップロードする方法のメリットとしては、
フォントの選択肢が増えるという事と、無料で好みのフォントが見つかれば
費用が掛からないという点ですね。
(英語フォントで良いのであればGoogle Fontsは無料なのでこちらを使うべき)
ただ、デメリットとしては作業手順が少なからず増えるという事と、
必ずしもライセンス的にWebフォント化が許されているフォントばかりではないという点に
気を付けなければならないという事です。

ひま缶でもWebフォント導入しましたので、
自分でアップロードしてWebフォント化する方法を
作業のメモとして残しておこうと思います。

ちなみに、ひま缶ではNasuフォントをWebフォントとして使用させていただいております。
めちゃ読みやすくないですか？読みやすいですよね。私もそう思います。

他にも無料で使える日本語フォントはたくさんありますので、
下記サイトから探してみると良いです。
フォントフリー – 無料で使える日本語フォント投稿サイト

フォントを自分でアップロードしてWebフォント化する手順

さて、肝心のフォントを自分でサーバーにアップロードしてWebフォントを読み込む方法ですが、こちらのサイトに超分かりやすくまとめられています。やったね！

10分で設定完了！Webフォントの使い方や軽量化・はてなブログでの設定手順、優良リソースなどまとめ【おすすめ日本語フォントも】 – Brian'z Imagination

こちらの記事の、(2) 自前でWebフォントをアップロードして使う手順の節をお読みになるといいでしょう。

ここでは簡単に手順のみを記しておきます。
決して手抜きなんかではありませんよ。

1.フォントを用意する

Webフォントを使いたいと言っても、使用するフォントが無いことには始まりません。
フォントのライセンスをよく確認しつつ、好みのフォントを探しましょう。
下記サイトから無料の日本語フォントを探すことができます。
フォントフリー – 無料で使える日本語フォント投稿サイト
ちなみにフォントでよく使われているライセンスについては下記のサイトがとても参考になります。
Webフォントとライセンス｜Web制作
Web フォントとライセンス

2.日本語フォントはファイルサイズを小さくする(サブセット化)

日本語フォントは相当ファイルサイズが重いため、そのまま使うとページの読み込み速度が遅くなってしまいます。
実際、ひま缶で使用させていただいているNasuフォントは、RegularとBoldを合わせて10MB近くありました。
サブセット化はフリーソフトを使用して行います。
(詳しい手順はやはり先のサイトをご覧ください。)
ちなみに、あまり無暗にフリーソフトを入れたくない派なので、最初はとてもためらいましたが、特にウイルスにかかることもなく安心しました。
危険を冒してまでWebフォントを導入する価値はあったと思っています。

3.ファイル形式の変換

お次は、先ほどファイルサイズを小さくしたフォントファイルのファイル形式を変換します。
「.woff」という拡張子の形式に変換するのですが、それもフリーソフトを使用します。

4.変換後のWebフォントをサーバーにアップロード

3のフェーズで変換したファイル(.woffと.eot)をサーバーにアップロードします。
Dropboxなどのストレージにファイルを置いて共有化することで
はてなブログなどでもWebフォントが使えるようになるみたいですよ。

5.スタイルシートにフォントの定義と設定を記述

@font-faceでフォントを定義し、適用したい範囲にfont-familyを仕込みます。
ひま缶ではこんな感じでやってます。

ヒラギノ角ゴとかメイリオとかはいらないと思うけど、
もしかしたら対応できてないブラウザとかあるかもしれないので一応設定してます。

もし、フォントが適用されないようでしたら、@font-faceのフォントファイルへのパスの記述をを確認すると良いです。
私は必ずと言っていいほど最初にパスを正しくするのを失念して、「表示されないじゃんかよ！」ってなります。
パスも正しいのであれば、ブラウザのキャッシュを削除してみましょう。
WordPressのプラグイン「WP Fastest Cache」を入れている方は、管理画面からのキャッシュ削除も忘れずに。

スポンサードリンク