web-dev-qa-db-ja.com

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

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

csscss3fontsgoogle-webfonts
217
David

インポート方法を使用します。

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

明らかに、 "Open Sans"はインポートされたフォントです。しかし、あなたはそれをあなたのものと置き換えることができます。単一のWordフォントの場合は、2つの単語の場合はfamily=...の後にフォント名を含めるだけです。これまでと同様にして、各Wordの間に+記号を追加します。

注：@importを 非常に CSSファイルの最初の行 （@Ronnyが指摘してくれてありがとう）。

Google Webfont Libraryでは、どのフォントを使用するかを決めると、3つのタブがあるボックスが表示されます。各タブはインジェクション方式、HTML、CSS、またはJavaScriptです。 @importタブはあなたにCSSファイルに必要なコードを与えるべきです。画像を参照してください。

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

@importを使用しない方が良いでしょう。上の図のように、レイアウトの頭の中でlink要素を使うだけです。

52
Burk

Google Webフォントをインポートするには、CSSファイルにBelowコードを追加します。

@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;
}
27
Shubham Kumar

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

@font-face { font-family: roboto-regular; 
                         src: url('../font/Roboto-Regular.ttf'); } 
h2{
        font-family: roboto-regular;
}
23
Fidel ramadhan
  1. https://fonts.google.com/ にアクセスするだけです。
  2. + をクリックしてフォントを追加します
  3. 選択したフォントに移動>埋め込み> @IMPORT> URLをコピーして、本文タグの上に.cssファイルを貼り付けます。
  4. 完了しました。
11
karunesh

タグ@importを使用

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

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

利点：

  • あなたはより良い応答時間のためにあなたがそれらのグーグルフォントを自己ホストすることを可能にします

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

  • あなたのキャラクターセットを選択してください
  • フォントスタイル/太さを選択してください
  • ターゲットブラウザを選択してください
  • 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;}
5
MarcoZen

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

CMSはiframeをサポートしていますか？あなたはあなたのコンテンツのトップにもiframeを投げることができるかもしれません。これはおそらく遅くなるでしょう - あなたのCSSにそれを含めることをお勧めします。

3
Eric Keyte

Jusはリンクを通ります

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

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

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
1
subindas pm
<link href="https://fonts.googleapis.com/css?family=(any font of your 
choice)" rel="stylesheet" type="text/css">

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

角かっこを除くWebサイトから選択したフォント名を入力します。

例えばあなたが選んだフォントとしてLobsterを選んだ、

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

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

例えば

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

これはcss3で簡単にできます。 @importステートメントを使用するだけです。次のビデオはその方法を簡単に説明しています。だから先に行って気を付けろ。

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

0
Gyan