Googleフォントを手軽にcssで使う方法

22.07.12

googleフォントを使ってＷEBデザインを華やかにしましょう！

手順は以下です！
①googleWEBフォントへアクセス
②好きなフォントを選び、ヘッダーに書き込むコードと、CSSのコードを入手。
③ヘッダーとcssにコードを書き込む。

googleWEBフォントへアクセス

まずはgoogleWEBフォントへアクセスしましょう。
https://fonts.google.com/

①日本語が欲しい場合は左上のLanguageタブをJapaneseにします。
好きなフォントをクリック。

②さらに太さなど好みを見つけたら、右の「Select this style」をクリック。
すると右に詳細が現れます。出ない場合はF5でリロードしましょう。
「link」の下に出たコードをheader内に貼り、
その下の「CSS rules to specify families」にでたコードをCSSに貼るだけです。