Google Web フォントを CSS ファイルにインポートするにはどうすればよいですか?

Google Web フォントを CSS ファイルにインポートする: ガイド

Google ウェブ フォントを CSS ファイルにインポートすると、Web サイトの美しさを向上させることができます。ただし、

への直接アクセスはできません。特定の CMS 環境では、セクションが制限されているように見える場合があります。それでも、CSS ファイル内にこれらのフォントをシームレスに組み込む解決策はあります。

@import メソッドの使用

@import ディレクティブは、Google Web Fonts をインポートするための効果的な方法であることが証明されています。たとえば、CSS ファイルにフォント「Open Sans」を含めるには、次の構文を使用します:

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

忘れずに「Open Sans」を希望のフォント名に置き換えてください。フォント名が複数の単語で構成されている場合は、上の例に示すように、各単語をプラス記号 ( ) でエンコードします。

適切な配置と生成

@import ディレクティブを先頭に配置します。ルールを実装する前に、CSS ファイルのGoogle Fonts は、@import ディレクティブを作成するための自動化された方法を提供します。フォントを選択し、( ) アイコンをクリックして、[1 Family Selected] コンテナを展開します。

[カスタマイズ] タブに移動してオプションを調整し、[埋め込み] タブに切り替えます。 「フォントの埋め込み」で「@import」を選択します。