Webフォントを利用する

できあがりイメージ

つくりかた

Step2 使いたいフォントを選ぶ

フォントが一覧で出てくるので、使いたいフォントを選びましょう。

Step3 選択肢をしぼる

フォントの種類や言語で選択肢をしぼって検索することができます。

Step4 Get font をクリックする

右上にあるGet font ボタンをクリックしましょう。

Step5 < > Get embed code をクリックする

右上にある< > Get embed code ボタンをクリックしましょう。

Step6 コードを表示する

@import を選択します。

Step7 コードをコピーする①

コードをコピーします。

Step8 フォントを追加する

CSS フォルダの始めにペーストして保存します。
CSS フォルダの一番最初の行に追加するのがオススメです。

Step9 コードをコピーする②

font-familyプロパティのフォントをコピーします

Step10 フォントを使用する

フォントを使いたい部分にペーストして保存します。
サンプルではh1タグにフォントを適用させます。

Step11 実際の見え方を確認する

フォントが自分が選んだものに変更されていたら完成です。