WebフォントとGoogleフォントの使い方

HTML+CSS

こんにちは、むじなるです。
今回タイトルにもある通りWeb・Googleフォントの使い方について書いていきますよ。

Web・Googleフォントって何?

すごく簡単に説明
まず、Webフォントについて。
Webフォントとは、Webサイト上でCSSを使って自由にフォントを表示するための技術だそう。
次はGoogleフォント。
GoogleフォントとはGoogleが提供しているWebフォントサービスとのこと。

使い方

では使い方を説明します、3つのステップでできますよ
今回はGoogleフォントでの使い方を説明します

1.使いたいフォントを選ぼう
まず「Googleフォント」から使いたいフォントを選ぼう

見つかったらそれをクリックして、
そしたら次はスタイルを選択しましょう(今回はRobotoを選択します)

そしたら、右の⊕をクリックしましょう

2.HTMLで指定のコードを追記する
そしたら、右側のリストに出てきたコードをコピーして、まずはHTML側にペーストします。

そしたら、<head>内にコピペしましょう

したらば<body>内に記述しましょう

class名は自分が使いやすいものに変更してください。

3.CSSでfont-familyを設定する

次に、リストに出てきたCSS側のコードを元に
HTMLで反映させたいところにfont-familyを指定しましょう。

これで完成です!お疲れ様でした。

おわり

今回Web・Googleフォントを紹介しました
最近学んだことだけど復習もかねて書けてよかったです
それでは、さようなら。

コメント

  1. kawa_hide より:

    CodePenが表示されていません。
    Embetは、ifrmeで入れましょう。

    必ず更新時、更新後に表示を確認してください。

タイトルとURLをコピーしました