crftロゴ
辞典アイコン

webフォントを実装する

オリジナルフォントをWebフォントとして実装する
Minoru Nitta
Minoru Nitta
グラフィックデザイナー・フォトグラファー
このエントリーをはてなブックマークに追加

オリジナルフォントをWebフォントとして実装する

このサイトcrftの記事用にアイコンや特殊キーなどをウェブフォントとして実装してありますが、実際の工程を紹介します。

  • Illustratorでベクターデータを作成する
  • IllustratorでSVGファイルを書きだす
  • SVGファイルをicomoonでフォント化する
  • フォント化したファイルなどをサーバーへアップロードする
  • ウェブサイトのスタイルシートを編集する
  • ページのコードを調節する

Illustratorでベクターデータを作成する​

今回はAdobe Creative Cloud及び、ショートカットなどを表記するための特殊キーなどをWebフォントとして実装するのを目的とします。それらのデータをIllustratorで作成します。細かな作成工程は割愛して、完成ファイルを無料で公開しますので、ダウンロードして参考にしてください。

IllustratorでSVGファイルを書きだす

今回はAdobe Creative Cloud及び、ショートカットなどを表記するための特殊キーなどをWebフォントとして実装するのを目的とします。それらのデータをIllustratorで作成します。細かな作成工程は割愛して、完成ファイルを無料で公開しますので、ダウンロードして参考にしてください。

アセットの書き出しでSVGファイルを作成してもよいのですが、グループ化などの手間があるので、今回はファイル>書き出し>スクリーン用に書き出し…を利用します。

スクリーン用に書き出しのパネルはアセットの書き出しパネルによく似ています。ただし対象がグループされ、パネルにドロップされたオブジェクトではなく、ファイル内の選択したアートボード単位でSVGファイルに書き出すことができます。

進捗状況 32.6%