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

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

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

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

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

配置することを確認してください@import任意のルールの前に、あなたのCSSの最上部に。

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

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en" />

@importを使用しない方がよい。上記のように、レイアウトのヘッドでリンク要素を使用するだけです。

フォントttf /その他のフォーマットファイルをダウンロードし、次のCSSコード例を追加します。

@font-face { font-family: roboto-regular; 
			 src: url('../font/Roboto-Regular.ttf'); } 
h2{
	font-family: roboto-regular;
}

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

@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;
}

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

タグ@importを使用します

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

上記の回答に加えて、このサイトも検討してください。 https://google-webfonts-helper.herokuapp.com/fonts

利点：

• 応答時間を改善するためにこれらのGoogleフォントをセルフホストすることができます

• フォントを選択してください

• 文字セットを選択してください
• フォントスタイル/太さを選択する
• ターゲットブラウザを選択してください
• そして、CSSスニペット（CSSスタイルシートに追加）と、プロジェクトに含めるフォントファイルのzipを取得します。

例：your_theme.css

@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal;  
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'),
             url('css_fonts/open-sans-v15-latin-regular.woff2') format('woff2'), 
             url('css_fonts/open-sans-v15-latin-regular.woff') format('woff'); 
}

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

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

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

<link href="https://fonts.googleapis.com/css?family=(any font of your 
choice)" rel="stylesheet" type="text/css">

フォントを選択するには、リンクにアクセスしてください：https : //fonts.google.com

角かっこを除いて、Webサイトから選択したフォント名を書きます。

たとえば、選択したフォントとしてロブスターを選択した場合、

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" 
type="text/css">

その後、これを通常のHTML / CSSファイル全体のフォントファミリとして使用できます。

例えば

<h2 style="Lobster">Please Like This Answer</h2>

ジャスはリンクを通過します

https://developers.google.com/fonts/docs/getting_started

それをスタイルシートにインポートするには

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

これはcss3で簡単に実行できます。@importステートメントを使用する必要があります。次のビデオでは、その方法を簡単に説明しています。だから先に進んでそれを見てください。

https://www.youtube.com/watch?v=wlPr6EF6GAo