webフォントを実装する

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

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

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

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

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

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

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

勝手マニュアル更新中

Minoru Nitta(父)

Tetsuro Nitta(長男)

Elementorで超時短

次世代WordpressビジュアルページエディターElementorをチェックする!