CSS で Google Fonts をインポートする

1. @import ルールを使用して CSS に Google Fonts をインポートする
2. link タグを使用して CSS に Google Fonts をインポートする

このチュートリアルでは、CSS に Google Fonts をインポートするいくつかの方法を学びます。

@import ルールを使用して CSS に Google Fonts をインポートする

CSS@import ルールは、スタイルシートに別のスタイルシートをインポートするために使用されます。url() 関数で文字列としてスタイルシートを指定できます。

@import ルールを使用して、CSS に外部フォントをインポートすることもできます。たとえば、url() 関数で Google Fonts を使用し、font-family プロパティを使用してフォントを設定できます。

Google Fontsには、さまざまなフォントがあり、そこから選択できます。フォントの URL はウェブサイトから入手できます。

たとえば、Google Fonts の Web サイトにアクセスして、Roboto フォントを選択します。次に、右側のサイドバーから@import ラジオボタンをクリックします。

次に、style タグの間に URL をコピーします。同様に、HTML で、h1 および p タグを作成します。

CSS では、スタイルシートの上部に@import ルールを記述し、url() 関数内に Roboto フォント URL を貼り付けます。フォント Outfit を選択し、URL を取得します。

次に、h1 タグを選択し、font-family プロパティを使用してフォント Outfit を設定します。同様に、段落にフォント Roboto を設定します。

このようにして、スタイルシートに Google Fonts をインポートできます。

ただし、@import ルールを使用して Google Fonts をインポートすることはお勧めしません。これは、ファイルがフェッチされない限り、フォントが Web ページに表示されないためです。

サンプルコード：

<h1> Title </h1>
<p>This is Roboto font.</p>

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

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

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

link タグを使用して CSS に Google Fonts をインポートする

link タグは、HTML で Google Fonts をインポートするための最も適切な方法です。link タグはフォントをプリロードするため、推奨されます。

フォント URL は、link タグの href 属性で指定できます。Google Fontsのウェブサイトからすべての link タグを生成できます。

たとえば、Google Fonts の Web サイトにアクセスして、Comforter Brush フォントを選択します。link ラジオボタンを選択し、生成された link タグをコピーします。

次に、タグを HTML に貼り付けて、p タグを作成し、その中にテキストを書き込みます。次に、CSS で p タグを選択し、font-family プロパティを Comforter Brush に設定します。

最初の 2つの link タグの rel 属性に preconnect を使用しました。これにより、ユーザーが href 属性のリソースを必要としていることをブラウザーに通知し、ブラウザーがリソースへのプリエンプティブ接続を開始できるようにします。

このようにして、link タグを使用して Google Fonts を CSS にインポートできます。

サンプルコード：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Comforter+Brush&display=swap" rel="stylesheet"> 

<p>Comforter Brush font.</p>

p {
 font-family: 'Comforter Brush', cursive;
}