CentOS6にfontcustomをInstallしてWebフォントを作成

投稿日：

icon_font_centosIE8のサポートが2016/01/12に終了するし、受注したホームページ案件にWeb（アイコン）フォントを使用したときの覚書。

WebフォントはIE9以上でないと表示できない。

簡単に流用出来てしまうし、手間と効果を考えるとホームページ程度なら画像で十分な気もする。

環境： CentOS 6.6, fontforge-20090622, fontcustom-1.3.8

 

目次

  • fontcustomをインストール
  • SVGをフォントに変換
  • Twitter Bootstrapと併用する

 

１．fontcustomをインストール

gemを実行するのでRubyが必要。前の記事を参考に。

あとはGitHub上のREADME通りに。

フォント作成プログラムfontforgeをインストール
# cd /opt/software/
# yum install fontforge

woffに変換用プログラムをインストール
# wget http://people.mozilla.com/~jkew/woff/woff-code-latest.zip
# unzip woff-code-latest.zip -d sfnt2woff && cd sfnt2woff && make && sudo mv sfnt2woff /usr/local/bin/

gem経由でfontcustomをインストール
# gem install fontcustom

確認
# fontcustom --version

fontcustom-1.3.8


 

２．SVGをフォントに変換

デザイナーが作成したイラストレーターファイルからSVGとして書き出す。出力時のオプション。

image

変換コマンド実行
# /path/to/project/fonts/
# fontcustom compile svg/ --name=icons --output=icons

CSSも出力してくれるので使いやすい。

 

３．Twitter Bootstrapと併用する

BootstrapのLESSを読み込んでいるので、glyphiconを拡張する書き方にした。

参考

main.less

@font-face {
   font-family: "icons";
   src: url("../fonts/icons.eot");
   src: url("../fonts/icons.eot?#iefix") format("embedded-opentype"),
   url("../fonts/icons.woff") format("woff"),
   url("../fonts/icons.ttf") format("truetype"),
   url("../fonts/icons.svg#icons") format("svg");
   font-weight: normal;
   font-style: normal;
}
.icons:extend(.glyphicon) {
   font-family: 'icons';
}
.icons-balloon:before {
   content: "\f100";
}
.icons-corner:before {
   content: "\f101";
}
 
test.html
<span class="icons icons-corner" aria-hidden="true"></span>

 

 

< Related Posts >