CSS Google Fonts
Google Fonts
HTMLの標準フォントを使用したくない場合は、GoogleFontsを使用できます。
Google Fontsは無料で使用でき、1000以上のフォントから選択できます。
GoogleFontsの使い方
<head>セクションに特別なスタイルシートリンクを追加し、CSSでフォントを参照するだけです。
例
ここでは、GoogleFontsの「Sofia」という名前のフォントを使用します。
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>
結果:
Sofia Font
Lorem ipsum dolor sit amet.
123456790
例
ここでは、GoogleFontsの「Trirong」という名前のフォントを使用します。
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
font-family: "Trirong", serif;
}
</style>
</head>
結果:
Trirong Font
Lorem ipsum dolor sit amet.
123456790
例
ここでは、GoogleFontsの「Audiowide」という名前のフォントを使用します。
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
font-family: "Audiowide", sans-serif;
}
</style>
</head>
結果:
Audiowide Font
Lorem ipsum dolor sit amet.
123456790
注: CSSでフォントを指定するときは、(予期しない動作を避けるために)常に少なくとも1つのフォールバックフォントをリストしてください。したがって、ここでも、リストの最後に汎用フォントファミリ(serifやsans-serifなど)を追加する必要があります。
利用可能なすべてのGoogleFontsのリストについては、 How To-Google FontsTutorialをご覧ください。
複数のGoogleFontsを使用する
複数のGoogleフォントを使用するには、次のようにフォント名をパイプ文字(|
)で区切ります。
例
複数のフォントをリクエストする:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
<style>
h1.a {font-family: "Audiowide", sans-serif;}
h1.b {font-family: "Sofia",
sans-serif;}
h1.c {font-family: "Trirong", serif;}
</style>
</head>
結果:
Audiowide Font
Sofia Font
Trirong Font
注:複数のフォントをリクエストすると、Webページの速度が低下する可能性があります。だからそれについては注意してください。
GoogleFontsのスタイリング
もちろん、CSSを使用してGoogleFontsを好きなようにスタイル設定できます。
例
「Sofia」フォントのスタイルを設定します。
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
text-shadow: 3px 3px 3px #ababab;
}
</style>
</head>
結果:
Sofia Font
Lorem ipsum dolor sit amet.
123456790
フォント効果の有効化
Googleは、使用できるさまざまなフォント効果も有効にしています。
最初にGoogleAPIに追加し、次に特殊効果を使用する要素に特殊クラス名を追加します。クラス名は常にで始まり、
で終わります。effect=effectname
font-effect-
effectname
例
「Sofia」フォントに火の効果を追加します。
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-fire">Sofia on
Fire</h1>
</body>
結果:
Sofia on Fire
複数のフォントエフェクトをリクエストするには、次のようにエフェクト名をパイプ文字(|
)で区切ります。
例
「Sofia」フォントに複数の効果を追加します。
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-neon">Neon Effect</h1>
<h1 class="font-effect-outline">Outline
Effect</h1>
<h1 class="font-effect-emboss">Emboss
Effect</h1>
<h1 class="font-effect-shadow-multiple">Multiple
Shadow Effect</h1>
</body>
結果:
Neon Effect
Outline Effect
Emboss Effect
Multiple Shadow Effect