前回までのあらすじアイコンでフォントを作るために桃を手に入れた一同。!!立ちはだかる英語の壁!!!迫りくる英単語をかいくぐり、なんとか会員登録をすませた一同。想像を絶する苦難が待ち受けていることをまだメンバーは知る由もなかった!!こんにちは。いうわけでアイコンでwebフォントを作ってみようの第二弾やっていきます。”calligraphr”に移動してログインしておいてください。赤枠のところに丁寧に作り方が書いてあります。まとめると1テンプレートを作成してダウンロードする↓2ダウンロードしたファイルにオリジナルのフォントを埋め込む。↓3作成したファイルをアップロード&調整する。↓4フォントをダウンロードする。いう感じで作成していきます。1テンプレートを作成してダウンロードする。左上の方にある”TEMPLATES”をクリックします。するとこんな画面になります。現在はまだテンプレートは空ですので左のメニューから選択していきます。※言語を選ぶと文字が一気にテンプレートへ挿入されます。Punctuation”を選択しました。文字をクリックして”DELETE”で削除できるのでいらない文字は削除しておきましょう。all”という文字をクリックすると全部消せます。今回は「!」だけ残してみました。これを使って「!」と入力すると桃のアイコンが出て来るフォントを作ります。お好みの形式でダウンロードしてください。※マックだと操作がちょこっと違うかもしれません。こんな感じのファイルがダウンロードできたら1のテンプレートの作成は完了です。2テンプレートにアイコンを埋め込むさきほどダウンロードしたファイルの「!」の欄に画像編集ソフトで桃を配置します。ちなみにこの画像ではPhotoshopを使ってます。3作成したファイルをアップロードして、フォントを作成してダウンロードするとこまで一気にやります。FONTS”をクリックします。テンポよくいきましょう。Template”をクリック。TEMPLATE”をクリックします。FONT”をクリックするべし。この状態で桃をクリックすると色々調整できます。Font”をクリック。フォントに名前をつけます。あなたのセンスが問われる瞬間です。全角文字を使うとどうなるかはためしていないのでわかりません。入力したら”BUILD”をクリックします。ttfとotfの形式でフォントが仕上がり、クリックすればダウンロードできます。ダウンロードしたフォントはインストールすると普通に使えます。webフォントにもこのまま使用できますが、woff形式に変更して使っていこうと思います。いうわけで次回は形式変更してwebに適応させるまでやっていこうと思います。フロントエンドエンジニア。