css - CSSファイルにGoogle Web Fontをインポートする方法は?

Question

CSSファイルにしかアクセスできないCMSを使用しています。そのため、ドキュメントの HEAD には何も含めることができません。CSSファイル内からWebフォントをインポートする方法があるかどうか疑問に思っていましたか?

Answer 1

@import次の方法を使用します。

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

明らかに、"Open Sans" ( Open+Sans) はインポートされたフォントです。だからあなたのものと交換してください。+フォントの名前に複数の単語が含まれている場合は、私が行ったように、各単語の間に記号を追加して URL エンコードします。

@importルールの前に、CSS の一番上に配置してください。

@importGoogle Fonts は、ディレクティブを自動的に生成できます。フォントを選択したら、その(+)横にあるアイコンをクリックします。左下隅に、「1 Family Selected」というタイトルのコンテナが表示されます。クリックすると拡大します。[カスタマイズ] タブを使用してオプションを選択し、[埋め込み] に戻り、[埋め込みフォント] の下の [@import] をクリックします。<style>タグ間の CSS をスタイルシートにコピーします。

Answer 2

CSS ファイルに以下のコードを追加して、Google Web フォントをインポートします。

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

Open+Sansパラメーター値をフォント名に置き換えます。

CSS ファイルは次のようになります。

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

body{
   font-family: 'Open Sans',serif;
}

Answer 3

1. https://fonts.google.com/にアクセスしてください。
2. +をクリックしてフォントを追加
3. 選択したフォント > 埋め込み > @IMPORT > URL をコピーし、ボディ タグの上に .css ファイルに貼り付けます。
4. 終わった。

Answer 4

タグ @import を使用する

@import url('http://fonts.googleapis.com/css?family=Kavoon');

Answer 5

@font-face を使用して URL にリンクすることもできます。 http://www.css3.info/preview/web-fonts-with-font-face/

CMS は iframe をサポートしていますか? コンテンツの上部に iframe を挿入することもできます。これはおそらく遅くなります - CSS に含める方が良いでしょう。