Google Fonts 使い方 2020年

Google Fonts

Google Fontsとは、Googleが無料提供しているWebフォントです。商用も使えますし、2019年から日本語フォントが追加されました。久しぶりに確認した所、画面が変わっていたので、使い方をシェアします。

Webフォントって何?

PCやスマホには、それぞれ異なるフォントがインストールされています。サイトでそれらに無いフォントが使われていた場合、代替えフォントが使われます。デザイン性を統一する際にWebフォントを使う事が出来ます。サーバー上のフォントにリンクして、それを参照する仕組みです。

Google Fontsの設定

https://fonts.google.com/ にアクセス。

  • 1:言語を選択 [Japanese]
  • 2:比べたい文言を入力するとイメージしやすいです。
  • 3:気に入ったフォントをクリック。
Google Fonts
  • 4-1:気に入ったフォントスタイルを選び[Select this style]をクリックして登録する方法と、
    4-2:ページをスクロールして [+]をクリックして登録する方法。どちらもStyleを修正出来ます。
  • 5:登録内容が確認できます。ショッピングカートの様な感じ。複数登録可能です。
Google Fonts Google Fonts

6:[Enbed]をクリックしてコードを入手します。

Webフォント

Link のコード(↓は例)を<head>の中に記載する

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

htmlに記載しなくても@importにあるコードをCSSファイルの中に書いてもOKです。

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

CSS rules to specify families のコードはCSSファイルに書きます。h1に適応する場合は、こんな感じ。

h1{font-family: 'Roboto', sans-serif;}

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください