Google Web フォントで Web サイトをもっと魅力的に！CSS ファイルへの取り込み方法

2024-05-16

CSS ファイルに Google Web フォントをインポートする方法

必要なもの

ウェブサイト
Google アカウント

手順

使いたいフォントを選択
フォントの詳細ページを開く
必要なコードをコピー

詳細ページには、ウェブサイトにフォントをインポートするために必要な CSS コードが表示されます。コードには、以下の2種類があります。
- @import: このコードを使用すると、Google Fonts のサーバーからフォントを直接インポートできます。
- <link>: このコードを使用すると、独自の CSS ファイルにフォントをインポートできます。
CSS ファイルにコードを貼り付け

使用している方法に応じて、以下のいずれかの方法で CSS ファイルにコードを貼り付けます。
- @import の場合: <head> セクション内の他の CSS インポートの上にコードを貼り付けます。
フォントを要素に適用

CSS ファイルでフォントをインポートしたら、font-family プロパティを使用して、任意の HTML 要素にフォントを適用できます。
```
body {
    font-family: 'Roboto', sans-serif;
}
```
ページを更新

補足

Google Fonts は、フォントの読み込み速度を向上させるために、フォントのファミリーと太さを自動的に指定します。
特定のフォントのウェイトやスタイルのみが必要な場合は、詳細ページで選択できます。

この例では、@import ディレクティブを使用して、Roboto フォントと Open Sans フォントを CSS ファイルにインポートします。

@import url('https://fonts.googleapis.com/css?family=Roboto|Open+Sans');

<link> を使用する

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Open+Sans">
</head>

次の例は、body 要素に Roboto フォントを適用する方法を示しています。

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

上記のコードは、単なる例です。ご自身のニーズに合わせて変更してください。

Google Web フォントを CSS ファイルにインポートするその他の方法

Webフォントジェネレーターを使用する

https://fonts.google.com/knowledge/using_type/using_web_fonts には、Webフォントジェネレーターが組み込まれています。これは、必要なフォントを選択して、CSS コードをすばやく簡単にコピーできる便利なツールです。

フォントスタイルと太さを選択します。
「コードを取得」をクリックして、必要な CSS コードをコピーします。

ローカルにフォントファイルをダウンロードする

Google Fonts からフォントファイルをダウンロードして、独自の Web サーバーにホストすることもできます。この方法の利点は、フォントの読み込み速度が向上し、インターネット接続がなくてもフォントを使用できることです。

「フォントをダウンロード」をクリックして、フォントファイルをダウンロードします。
フォントファイルを Web サーバーにアップロードします。
CSS で @font-face ルールを使用してフォントを定義します。

例:

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/MyFont.woff2') format('woff2'),
       url('/fonts/MyFont.woff') format('woff');
}

body {
  font-family: 'MyFont', sans-serif;
}

セルフホステッドフォントサービスを使用する

https://helpx.adobe.com/fonts/using/use-typekit-net.html や https://www.fonts.com/ のようなセルフホステッドフォントサービスを使用すると、Google Fonts 以外のフォントを含む、より多くのフォントオプションにアクセスできます。これらのサービスは通常、月額または年額のサブスクリプション料金がかかります。

どの方法を選択する必要がありますか?

最適な方法は、ニーズとスキルレベルによって異なります。