CSS Googleフォント
Googleフォント
HTMLで標準フォントを使用したくない場合は、Googleフォントを使用できます。
Googleフォントは無料で使用でき、1000以上のフォントから選択できます。
Googleフォントの使い方
<head> セクションに特別なスタイルシートリンクを追加し、CSSでフォントを参照するだけです。
例
ここでは、Googleフォントの”Sofia”という名前のフォントを使用します。<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
例
ここでは、Googleフォントの"Trirong"という名前のフォントを使用します。<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
例
ここでは、Googleフォントの”Audiowide"という名前のフォントを使用します。<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やsan-serifなど)をリストの最後に追加する必要があります。
利用可能なすべてのGoogleフォントのリストについては、HowTo - Googleフォントチュートリアルを確認してください。
複数のGoogleフォントを使用する
複数のGoogleフォントを使用するには、フォント名をパイプ文字(|）で区切ります。：
例
複数のフォントをリクエストする:<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ページの速度が低下する可能性があるため、注意してください。
Googleフォントのスタイリング
もちろん、CSSを使用して、Googleフォントを好きなようにスタイルできます。
例
"Sofia" フォントのスタイルを設定します。<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では、使用できるさまざまなフォント効果も有効にしています。
まず、Google APIにeffect=effectnameを追加し、特殊なエフェクトを使用する要素に特別なクラス名を追加します。 クラス名は常にfont-effect-で始まり、effectnameで終わります。
例
「Sofia」フォントに火の効果を追加します。<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”フォントに複数の効果を追加します。<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
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。