朗報! リニューアルされたGoogle Fontsがかなり使いやすくなってる、フリーフォントとアイコンを探すときに便利
Post on:2023年9月12日
先週、Google Fontsがリニューアルされました!
サイトのデザインは一新され、フォントやアイコンがこれまで以上に簡単に探せ、すぐにダウンロードしたりコードを簡単に利用できます。
新しくなったGoogle Fontsの使い方をざっと一通り紹介します。

近日リリース予定のChrome 117もデザインが一新されますが、それに先駆けて、Google Fontsは9/7にリニューアルされました。
We're very excited about this: The new Google Fonts, find what you’re looking forhttps://t.co/agnALPyt9g
— Google Fonts (@googlefonts) September 7, 2023
Google Fontsはこの10年間で、1,000以上の言語で1,500以上のフォントと6,000以上のアイコンまで成長し、これらの多くのフォントとアイコンをより検索・閲覧できるようにリニューアルされました。
大きな変更点の一つが、サイトナビゲーションです。
Material DesignのNavigation railが採用されており、サイトの主要セクション(フォント・アイコン・ナレッジ)に簡単にアクセスできます。また、150を超える言語に対応したNotoフォントがこのナビゲーションに昇格しました。

Google Fonts: ライトモードとダークモード
ライトモードとダークモードの切り替えはサイトナビゲーションの一番下。カラーパレットには、Material Design 3のカラーシステムが使用されています。
2つ目は、新しいサイドバーです。
フォントやアイコンを探すときに役立つフィルタやカテゴリ一覧が表示されており、フォントやアイコンのカスタマイズもサイドバーでできます。

Google Fonts: フォント(左)とアイコン(右)のサイドバー
フォントの詳細ページを見てましょう。
日本語フォントを探すときは、サイドバーの「Filter」内「Language」から「Japanese」を選択します。右上の「Sort」から「Trending」「Newest」でソートもできます。
当ブログでも話題になったMORISAWA BIZ UDゴシックを見てます。
参考: フォントが大好物な人に朗報🎉 MORISAWA BIZ UDゴシックとUD明朝がオープンソースになったぞ!!

BIZ UDゴシック -Google Fonts: Specimen
「Specimen」ではフォントを使用したサンプルテキストが表示されます。スクロールすると、さまざまなウェイト・サイズのテキストが表示されます。

BIZ UDゴシック -Google Fonts: Specimen
「Type tester」では、テキストを好みのテキストに変更できます。ウェイト・サイズも変更できます。

BIZ UDゴシック -Google Fonts: Type tester
「Glyphs」は、そのフォントで使用できる字形の一覧です。

BIZ UDゴシック -Google Fonts: Glyphs
「About & License」は、そのフォントの概要とライセンスを確認できます。Google Fontsに登録されているフォントのライセンスはSIL Open Font Licenseがほとんどなので、商用でも安心して利用できます。

BIZ UDPゴシック -Google Fonts: About & License
フォントに関する知識も得られます。日本語をはじめ、中国語、韓国語、ハングルなど、さまざまなコンテンツがあります。

そして、Google Fontsは、アイコンも充実しています。収録されているのは、Material SymbolsとMaterial Iconsの2種類で、6,000種類以上の可変アイコンが利用できます。
Material Symbolsでは3つのスタイル(Outlined, Rounded, Sharp)があり、上部の「Fill」に対応しています。カテゴリも豊富で、UI用のアイコンをはじめ、ビジネスやホビー、ソーシャルメディア、アクティビティ、トラベルなど、さまざまなアイコンがあります。

Icons -Google Fonts: ライトモード
サイドバーの月アイコンをクリックすると、ダークモードになります。

Icons -Google Fonts: ダークモード
アイコンを選択すると、アイコンのダウンロード(SVG, PNG)と利用方法(アイコンフォントのコードなど)が表示され、簡単に利用できます。

sponsors