Googleフォント
HTMLで標準フォントを使用したくない場合は、Googleフォントを使用できます。
Googleフォントは無料で使用でき、1000以上のフォントから選択できます。
Googleフォントの使い方
<head> セクションに特別なスタイルシートリンクを追加し、CSSでフォントを参照するだけです。
例
ここでは、Googleフォントの”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
自分で試してみる »
例
ここでは、Googleフォントの"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
自分で試してみる »
例
ここでは、Googleフォントの”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やsan-serifなど)をリストの最後に追加する必要があります。
利用可能なすべてのGoogleフォントのリストについては、HowTo - Googleフォントチュートリアルを確認してください。
複数のGoogleフォントを使用する
複数の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ページの速度が低下する可能性があるため、注意してください。
Googleフォントのスタイリング
もちろん、CSSを使用して、Googleフォントを好きなようにスタイルできます。
例
"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では、使用できるさまざまなフォント効果も有効にしています。
まず、Google APIに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
自分で試してみる »
