Google フォント
HTML で標準フォントを使用したくない場合は、Google フォントを使用できます。
Google Fonts は無料で使用でき、1000 以上のフォントから選択できます。
Google フォントの使い方
<head> セクションに特別なスタイル シート リンクを追加し、CSS でフォントを参照するだけです。
例
ここでは、Google Fonts の「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 Fonts の「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 Fonts の「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 つのフォールバック フォントをリストします (予期しない動作を避けるため)。そのため、ここでも一般的なフォント ファミリー (セリフやサンセリフなど) をリストの最後に追加する必要があります。
利用可能なすべての Google フォントのリストについては、ハウツー - 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 では、使用できるさまざまなフォント効果も有効にしています。
最初に追加effect=effectnameGoogle API に追加し、特殊効果を使用する要素に特別なクラス名を追加します。クラス名は常に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
自分で試してみる »
