Googleフォントの使い方がわからなかったので、今回はGoogleフォントについてやっていきたいと思います。
この記事でわかること
・Googleフォントについて
・Googleフォントの使い方
今回もこんな感じでやっていきたいと思います。
Google Fonts
Google Fonts
Making the web more beautiful, fast, and open through great typography
Googleフォントについて
Googleフォントとは
2010年に「Google Web Fonts」としてスタートしたGoogle Fontsは、ユーザーがWebサイトでWebフォントを使用できるようにするためのインタラクティブなアプリケーション・プログラミング・インターフェースの集合体のことです。
このサービスではGoogleが主催しており、全フォントとサイズははすべて無料とのことです。
商用または個人を問わず、あらゆるWebサイトで使用できるライセンスの下で公開されています。
自分のPCにダウンロードできるのか？
結論：できます。
フォントをダウンロードするには、フォントの選択範囲を作成し、画面下部のドロワーを開き、選択ドロワーの右上にある「ダウンロード」アイコンをクリックするだけです。
フォントをダウンロードして、モックアップやドキュメントで使用したり、マシンのローカルで使用したりすることができます。
ブラウザがGoogle Fonts APIを使用するウェブサイトをレンダリングする際に、フォントがコンピュータにローカルにインストールされているかどうかをチェックし、ウェブフォントよりもローカルバージョンを使用することを好むことに注意してください。
パーソナルコンピュータにローカルにインストールされているフォントを常に最新のものにするためには、Google Fonts APIの最新バージョンのフォントを自動的にコンピュータに同期させるフォントマネージャ（SkyFontsなど）を使うことをお勧めします。
Googleフォントのウェブフォントはページの速度を遅くするのか
ウェブフォントは、ページのパフォーマンス、保守性、アクセシビリティを向上させる可能性があります。
フォントファイルは表示する前にサイト訪問者のコンピュータにダウンロードする必要があります。Google Fonts APIによって提供されるフォントは、ダウンロードを高速化するために自動的に圧縮され、一度ダウンロードされるとブラウザにキャッシュされ、Google Fonts APIを使用する他のウェブページで再利用されます。
Google Fonts APIがより広く使われるようになると、あなたのサイトやページの訪問者は、デザインに使われているGoogleフォントをすでにブラウザのキャッシュに持っている可能性が高いです。
一般的には、サイトやページで提供しているフォントファイルのサイズに注意する必要があります。
必要なファミリー、スタイル、スクリプトのみを埋め込むことをお勧めします。
選択ドロワーの右上にあるページロードタイムインジケータは、「カスタマイズ」タブで選択したファミリー、スタイル、スクリプトの数に基づいて、選択した内容がページの全体的なロードタイム（遅い、中程度、速いなど）にどのような影響を与えるかを示しています。
GoogleフォントがWebを高速化する方法についての詳細は下記に載っています。
しかし、日本語フォントはひらがな、カタカナ、漢字を読み込むため注意が必要です。
上記で書いてある通りに、必要なファミリー、スタイル、スクリプトのみを埋め込むようにしましょう。
Googleフォント使用方法
Googlフォントのサイトにまずはアクセス
Googleフォントのサイトはページの最初の部分に貼り付けておきました。853種類のフォントファミリーから選べるGoogle Fontsのウェブサイトにアクセスしてみましょう。
このウェブサイトでは、フォントのファミリー、スタイル、スクリプトで検索結果をフィルタリングすることができます。
Google Fontsでは、「特集」ページにアクセスすると、新しいフォントも紹介されています。
自分の好みのフォントを検索する
使用したいフォント名が既にあれば、それを検索することができます。
使用したいフォント、スタイルを選択
各フォントファミリーには、"Select this style”というボタンがあります。
ボタンをクリックして、サイドバーに選択した全てのフォントファミリーが表示されます。
リンクのコードをコピーしてlayout.cssに貼り付ける
@importコードをコピーしてlayout.cssに貼り付けます。
そのあとcssのコードも貼り付けましょう。
貼り付けるのは下記の赤い四角の部分だけです。
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Lato',sans-serif;
}これでLatoというフォントを使用することができます。
以上でReactでのGoogleフォントの使用方法です。
おまけ：Gatsbyでの使用方法
Gatsbyでの使用方法は下記サイトで紹介されています。
プラグインをインストールするだけで使用できるとのことです。
次回はこのことについて書いていこうと思います。
Using Google Fonts in Your Gatsby.js Projects
Gatsby's great, right? It's a powerful little React-based framework that makes building static websites and apps super easy. I recently used it to build an updated portfolio site for myself, and I love how simple it is to use right out of the box. The only issue I ran into at first, was integrating Google Fonts.
まとめ
今回はGoogleフォントについて書きました。
Webサイトを作ったり、イラストレーター画像を作る際には大変便利なサービスです。
プログラミングを勉強している方はぜひ使ってみてください。
最後まで読んで頂き、ありがとうございました。