Google Fontsを使ってみよう！2(＠import編)

前回Google Fontsのはじめ方（<link>タグを使った方法）について、ご紹介しました。

今回はもう一つの＠importを使った導入方法をお伝えしていきます。

Google Fontsにアクセス

▼サイトはこちら

https://　fonts.google.com/

Google Fontsにアクセスしたらフォントを選んで追加していきます。

今回はKaisei Decolというフォントを使ってみたいと思います。

フォントの太さが3種用意されていました、今回はRegular 400とBold 700を選んで追加してみます。

使いたいフォントを選び終わったら、右上の(■+)のアイコンをクリックして詳細を見ます。

現在選んでるフォントが出てくるので、使わないフォントはRemoveしておきます。

今回はKaisei DecolのRegular 400とBold 700を使いたいので、Rampart Oneフォントは (-) で消しておきます。

そして今回は＠importを使ってみたいので、そちらのラジオボタンをチェックしてコードをコピーします。

その下のCSSもコピーします。

今回はhtmlの<style>タグ内にコピペしてみました。

▼html。クラス名p01にスタイルをつけます。

このhtmlファイルをブラウザで開いてみます。

▼表示されました！

▼Bold 700の方を使いたい時は、font-weight: 700;　を追加します。

▼太くなりました！

⭐️ダミーテキスト

ちなみにダミーテキストはLorem Ipsumというサイトからのものです。サイト作成時などで、とりあえずダミーで何かテキストを入れておきたい時に使ってみてはいかがでしょうか？

https://　www.lipsum.com/

---

いかがでしたか？今回は以上になります。お疲れ様でした⭐️