こんにちはデザインチームオカベです。
前回の素材系お役立ちサイトに続き、今回はフォントに関するサイトについてまとめました。
前回と同じく基本的に無償提供・利用可能なものです。
アイコンフォント
アイコンフォントとは、アイコンだけど通常のテキストと同じ様な扱い（文字サイズや文字色などCSSで制御すること）ができる便利な仕組みです。
同じアイコンだけど、web内でサイズ違いや色変えなど、ちょっとした違いのパターンが頻繁に出るようであれば画像化したアイコンではなく、こちらを利用すると良いでしょう。
Icon Font & SVG Icon Sets ❍ IcoMoon
こちらのサイトではオリジナルのアイコンフォントを作ることができる、とてもありがたいサイトです。
前回記事で紹介したアイコン素材サイトと供に利用すると効果的です。
右上の「IcoMoon App」ボタンからアイコンフォント作成画面にいけます。
自分で作成したオリジナルアイコンをフォント化できますし、あらかじめ用意されたアイコンを使用することもできます。
フォント化したいアイコンが決まったら、画面右下「Generate Font」からフォント化に必要なデータをダウンロードできます。
Webフォント
ひと昔前までは書体を変えた見出しなどは画像化していましたが、今では当たり前になったWebフォントのおかげで、Webの様式もずいぶん便利でおしゃれに様変わりしました。
そんなWebフォントも、下記サービスのおかげでお手軽に利用できるようになりましたのでいくつかご紹介。
Google Fonts
使用したいフォントとウェイトを選択すると読み込み用のコードが用意されるので、利用もとても簡単です。フォントの種類も豊富です。
ただ仕方がないですが、欧文フォントが圧倒的に多いです。
Adobe Fonts
こちらは「Adobe Creative Cloud」の契約が必要（有料）になりますが、Webを作る上でAdobeのアプリを使用している方も多いと思いますので、すでに契約中の場合は実質無料で利用できると思います。
Google Fontsとの違いとしては「モリサワ」や「フォントワークス」といったフォントメーカーの書体も扱っており、日本語フォントの種類が豊富です。
使い方はGoogle Fontsと同様、必要なコードが用意されているので簡単に利用できます。
