Contents
Webフォント とは
Webフォント をざっくり説明すると、HTML上でフォントと同じ感覚で扱える画像です。
拡大や縮小をしても画質の劣化はなく、色も変えられるという優れもの。
WordPressのテーマによってはFont awesomeが使えるので、利用している方も多いと思います。
test
GIMP
GIMP
また、画像なのにフォントとして扱ってくれるので書き出しが早く、SEO対策にもメリットがあります。
ちなみに私の環境では、編集画面上で異なるアイコンが表示されています。
web上ではきちんと表示されるのですが。恐らく何かが干渉していますね。
ま、いいか。
Webフォント 自作に至ったきっかけ
私はGIMPの使い方のブログを書いています。
しかしGIMPロゴのアイコンフォントが無かったので仕方なく自作することにしました。
上のやつです。
おかげで画像についてかなり勉強になりました。
作業の流れ
Webフォント 導入工程
GIMPなどでPNG画像作成
Inkscapeでベクター画像作成
IcoMoonにアップロードして変換
FTPでフォントをサーバにアップロード
style.cssに追記
icomoonでコードを取得して書き込む
準備するもの
- Inkscape
- FTPが使える環境
InkscapeはIllustratorのオープンソース版みたいなソフトウェアです。
ここではビットマップ画像をベクター画像に変換するだけの目的で使用します。
フォントをサーバにアップロードするためにFTP接続が必要です。
レンタルサーバの管理画面から接続方法を確認してください。
私はwindows環境でFFFTPを使用してアップロードしていますが、お好みのFTPソフトを用意してください。
フォント化する画像サイズは250x250pxくらいの正方形が作りやすかったです。
私はGIMPを使ってpng画像を作りましたが、正方形のpng画像が作れたらどんな方法でも構いません。
GIMPの導入に関してはこちらの記事に掲載しています。
画像は黒、背景は透過で作成すると、よりきれいなWebフォントができると思います。
次の工程でInkscapeに取り込んだときに、境界のコントラストがはっきりしている方がエッジが美しく仕上がります。
画像は用意できたものとして次に進みます。
Inkscapeでベクター画像作成
Inkscapeは公式サイトから最新版をダウンロード、インストールしてください。
bmp画像からsvg画像を作る
Inkscapeを開き、
絵を描く→新規ドキュメント
と進みます。
デフォルトではA4ドキュメントになっています。
ファイル→ドキュメントのプロパティー
と進みます。
ドキュメントサイズを240×240px
に設定します。
特に単位にpxを選ぶのをお忘れなく。
240x240pxだと作業画面が小さくなると思うので、
表示→ズーム
などでお好みの作業画面を確保してください。
上で作った画面に、フォントを作りたいpng画像をドラッグ＆ドロップします。
画像のインポート形式は埋め込みのままでOKです。
画像はズレたままでいいので、
パス→ビットマップのトレース
と進みます。
プレビュー画像がくっきりと見えるようにパラメーターを調整します。
何もいじらなくてOKですが、明るさの境界のしきい値を少し調整するのもいいと思います。
終わったら適用します。
ドロップした画像をクリックしたまま移動すると、パス画像（ベクター画像）ができていることが確認できます。
svg画像はベクター画像とビットマップ画像を共存できます。
今回はビットマップ画像は必要ないので削除します。（残すとファイルサイズが大きくなります。）
レイヤーとオブジェクトからimageを削除してpathのみにします。
pathを選択したまま矢印をドラッグして、画像をキャンパス内に収めます。
微調整のために
オブジェクト→整列と配置
を選びます。
この画面で微調整ができます。
私は中心を垂直軸と水平軸に合わせるため、これらのボタンを１回ずつポチッと押しています。
微調整が終わったら
ファイル→名前を付けて保存
でsvgファイルの完成です。
作業工程のまとめ
240x240pxの作業ドキュメント準備→png画像ドラッグ&ドロップ→画質調整→パス作成→image画像削除→パス画像をドキュメントに収める→位置微調整→svg出力
黄色の作業はサイドメニューから行えるようになりました。
こうやってまとめてみると、あまり大した作業をしていないことがわかります。
実際、２個目以降のフォント作成は驚くほどに楽な流れ作業でした。
IcoMoonにアップロードして変換
IcoMoonはwebフォントの素材置き場みたいなところです。無料で利用できます。
自作したsvgファイルも含め、サーバーにWebフォントを設置するために必要なファイルを自動生成してくれるありがたいサイトです。
まずはこちらからアクセスしてください。
IcoMoon公式サイト
IcoMoonのフロントページ右上のIcoMoon APPをクリック。
左上のImport Iconsを押して、作成したsvgファイルをアップロードします。
Untitled setに表示されます。
クリックして選択したらGenerate Fontを押します。
下のフリーフォントも混在できます。
ファイルサイズと相談しながら選択してください。
作成したフォント名は自動で命名されているので、自由に修正してください。
最後にDownloadしたら終了です。
FTPでファイルをアップロードする
icomoon.zipの中身
icomoon.zipを任意のフォルダーに解凍します。
アップロードするのはfontsフォルダーのみです。
fontsフォルダーの中身は4ファイル。すべてサーバーへアップロードします。
fontsフォルダーの設置場所
ユーザーによって WordPress 使用環境は異なりますが、使用しているテーマファイルのstyle.cssが設置されているフォルダーに fonts フォルダーを作り、4ファイルをアップロードする流れになると思います。
具体例としては以下のようにたどれば設置場所に着くと思います。
public_html > サイトアドレス > wp-content > themes > 使用しているテーマ
ここに style.css があれば成功です。fonts フォルダーを新規作成してその中に4ファイルをアップロードしてください。
もしもすでに fontsフォルダーが存在しているなら fonts1 などのフォルダー名にします。
IcoMoon からダウンロードした style.css 内の “fonts” を “fonts1” に改変すれば動作すると思います。
style.cssの編集
WordPress で外観→テーマファイルエディターを開く
IcoMoon ファイル内の style.css をテキストエディターで開き、全選択してコピー
テーマファイルエディターの style.css の末尾にペースト
以上で自作フォントの使用環境は整いました。
自作 Webフォント 使用方法
Webフォント のコードを入手する
IcoMoonのサイトに行くと、cookieのおかげで先ほどの選択が残っていると思います。
使用したいフォントのGet Codeをクリックします。
HTMLコードをコピーします。
Webフォント コードのペースト
投稿編集画面の右上端からコードエディターを呼び出します。
Webフォントのコードは<span></span>で囲われているので、<p></p>の中に埋め込みます。
フォントを挿入したい場所にペーストした後、コードエディターを終了すればフォントが適用されているはずです。
カスタムhtmlやhtml挿入でもWebフォントを挿入できます。
色々試して使いやすい方法を見つけてください。
まとめ
１つ目の自作フォントを作るときは腰が重かったのですが、いざ作ってみると２回目以降は単純な流れ作業になりました。
IcoMoonはcookieで履歴を残してくれていると思うので、いつ消えるかわかりません。
いざという時のためにアカウントを作っておくのもいいかもしれません。無料で作れます。
また、Webフォントを追加したいときは同様の作業をします。
ダウンロードしたfontsフォルダの上書きアップロードとstyle.cssの上書きをするだけです。
Webフォントを自分のサーバーから呼び出すようにしてから、表示速度が格段に早くなったように感じます。
自作フォント、ハマりそうです
