Glyphs (有料版)を使ってリガチャ WEB FONT (Symbol Set)を制作する
ここではフォント作成ツール「Glyphs」の有料版を使って、合字(Ligature/リガチャ)を制作し、ロゴやシンボルマークをWEBフォントとしてWebサイトに表示する方法について記載します。
合字(Ligature/リガチャ)WEBフォントによるシンボルマークのメリットや、その他ソフトでの制作方法などは、
日本でリガチャWEBフォントに詳しい完全版】Ligature Symbols フォントセットの自作方法｜くらげだらけさんのサイトをご参照ください。(FontForgeを用いた作成方法が主に解説されており、たいへん参考にさせていただきました。)
※Glyphs Mini(無料版)でできるかどうかは当方、未検証です。
今回は、html上に「star」と記載し、任意のCSSクラスを指定することで、「★」のマークをWEBページに表示します。
(1)Glyphs(有料版)を起動したら、上部メニュー＞フォント＞新規グリフから新規グリフを作成します。
(2)グリフ名をクリックして編集できるので、「s_t_a_r.liga」とタイプします。(各文字の間にアンダースコアをいれ、.ligaをグリフ名の後ろに付加することで、標準の合字として出力できるようになります。)
(3)グリフをダブルクリックして編集画面を開き、あらかじめイラストレータなどで作成しておいた「★」のベクターデータをペーストします。
(4)画面左上の「i」のマークのボタンをクリックし、「フォント」タブを開き、任意のフォント名を設定します。ここではmyfontとしました。
(5)次に「フィーチャー」タブを開き上の方にある、「OpenTypeフィーチャーを自動生成」のチェックを入れます。
すると、左のペインに「liga」という項目が現れ、コードが挿入されているのがわかります。
現れない場合は、画面下部にあるリロードボタン(矢印が円形になったマークのボタン)を押してください。
(6)Glyphs書類全体を保存してから、上部メニュー＞ファイル＞出力を開いて「otf」タブからOpentype形式で出力します。
myfont-Regular.otfという名前のフォントファイルが出力されました。
(7)出力されたmyfont-Regular.otfを、WEBフォントに変換します。今回は、WOFF(.woff)形式とEOT(.eot)形式に変換します。
無料の以下のサイトでOTFを各種フォントフォーマットにコンバートできます。
Convert Fonts (OTF to WOFF)
Convert Fonts (OTF to EOT)
※Font SquirrelのWeb Font Generatorも無料で非常に便利なサイトですが、今回のリガチャWebfontを変換したら、うまくブラウザで表示できませんでしたので、私のようにフォントに関してよくわからない方は、Convert Fontsサイトを利用するのが無難かもしれません。
(8)変換したら、WEBサイトの任意の場所にアップロードし、htmlとcssを準備します。
♦index.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>STAR</title> <link href="styles.css" rel="stylesheet" type="text/css" /> </head> <body> <span class="myfont">star</span><br> </body> </html>
♦styles.css
@font-face {
font-family: 'myfont-Regular';
src: url('myfont-Regular.eot');
src: url('myfont-Regular.eot?#iefix') format('embedded-opentype'), url('myfont-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
.myfont {
font-family: 'myfont-Regular';
font-size: 64px;
-webkit-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
-ms-text-rendering: optimizeLegibility;
-o-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
}
上記のHTMLとCSSもサーバにアップロードすると、結果が表示されます。
デモページがうまく表示できない場合は、ブラウザがWEBフォントに対応していないです。
特にIEは対応していません。