GoogleのウェブフォントをCSSコードにインポートする方法をお探しなら、このサイトをご覧ください。あなたのウェブサイトでGoogle Fontsを使い始めるには、Google Fontsのウェブサイトで生成した簡単なコードを既存のスタイルシートに追加するだけです。ここでは、CSSの@importクラスを使用してGoogleウェブフォントをウェブサイトに表示する方法を紹介します。
1
フォント・スタイルを選択します。使用したいフォントをクリックします。リストを下にスクロールしてすべてのスタイルを表示し、最も気に入ったスタイルで「このスタイルを選択」をクリックします。
2
コードをコピーします。ページの右側にある「ウェブで使う」で、「@import」の隣にある丸を選択します。すると、ボックス内にコードが表示されます。<style></style>タグの間にあるコード部分、例えば@import url(');をコピーしてください。
3
CSSファイルまたはHTMLドキュメントを開いてください。別のスタイルシートを使っている場合は、編集したい.cssファイルをテキストエディタで開きます。インラインCSSを使用している場合は、フォントを使用したいHTMLファイルを開きます。
4
コピーしたコードをスタイルシートに貼り付けます。別のCSSファイルを編集している場合は、コピーした@import情報をシートの先頭（一番最初の行）に貼り付けます。HTMLファイルで作業している場合は、コピーしたコードを<style></style>タグの間に貼り付けます。
HTMLファイルで作業している場合、フォント情報は次のようになるはずです：
<!DOCTYPE html> <html> <head> <title>タイトル</title> <style> @import url('https://fonts.googleapis.com/css2?family=Lora&display=swap'); </style> </head> <body> <h1>ローレム・イプサム</h1> </body> </html>
別のスタイル・シートで作業している場合、CSSファイルの最初の行はこのようになります：
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap')；
5
Googleフォントを使ったスタイルの定義フォントを使用可能にするコードを追加したので、bodyやh1要素などのスタイルでフォントを定義することができます。たとえば、標準の本文テキストを20pxのLoraフォントにしたい場合、スタイルシートまたはスタイルタグの間に次のように入力します：
body { font-family: 'Lora'; font-size: 20px; }.
- color "と "font-weight "プロパティで変更できます。
- さらに多くのテキストエフェクトを追加したい場合は、.NETのGoogleのサポートされているテキストエフェクトのリストをご覧ください。ファイヤーアニメーション、ネオン、アナグリフなど、クールなエフェクトがたくさんある！
6
CSSまたはHTMLファイルを保存する。CSS宣言にフォントを追加してファイルを保存すれば、準備は完了です！ブラウザがGoogleフォントを取得し、指定したプロパティで表示します。
- 一度に複数のGoogleフォントをCSSコードに含めることができます。ただ、フォントはCSSにインポートされるため、複数のフォントを使用すると読み込み速度に影響する可能性があることに注意してください。複数のGoogleフォントを含めたい場合は、使用したいフォントごとにコードをコピーし、ここと同じ方法でコードに貼り付ける必要があります。
コメント
最新を表示する
NG表示方式
NGID一覧