朗報! リニューアルされたGoogle Fontsがかなり使いやすくなってる、フリーフォントとアイコンを探すときに便利

先週、Google Fontsがリニューアルされました!
サイトのデザインは一新され、フォントやアイコンがこれまで以上に簡単に探せ、すぐにダウンロードしたりコードを簡単に利用できます。

新しくなったGoogle Fontsの使い方をざっと一通り紹介します。

朗報! リニューアルされたGoogle Fontsがかなり使いやすくなってる

Google Fonts

近日リリース予定のChrome 117もデザインが一新されますが、それに先駆けて、Google Fontsは9/7にリニューアルされました。

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

フォントに関する知識も得られます。日本語をはじめ、中国語、韓国語、ハングルなど、さまざまなコンテンツがあります。

サイトのキャプチャ

Font Knowledge

そして、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)と利用方法(アイコンフォントのコードなど)が表示され、簡単に利用できます。

サイトのキャプチャ

Search Icon -Google Fonts

sponsors

top of page

©2024 coliss