CSSチュートリアル

CSSホーム CSSの紹介 CSS構文 CSSセレクター CSSハウツー CSSコメント CSSの色 CSSの背景 CSSボーダー CSSマージン CSSパディング CSSの高さ/幅 CSSボックスモデル CSSの概要 CSSテキスト CSSフォント CSSアイコン CSSリンク CSSリスト CSSテーブル CSSディスプレイ CSSの最大幅 CSSの位置 CSSZ-index CSSオーバーフロー CSSフロート CSSインラインブロック CSS整列 CSSコンビネータ CSS疑似クラス CSS疑似要素 CSSの不透明度 CSSナビゲーションバー CSSドロップダウン CSS画像ギャラリー CSS画像スプライト CSS AttrSelectors CSSフォーム CSSカウンター CSSWebサイトのレイアウト CSSユニット CSSの特異性 CSS!重要 CSS数学関数

CSS Advanced

CSSの丸みを帯びたコーナー CSSボーダー画像 CSSの背景 CSSの色 CSSカラーキーワード CSSグラデーション CSSシャドウ CSSテキスト効果 CSSWebフォント CSS2D変換 CSS3D変換 CSSトランジション CSSアニメーション CSSツールチップ CSSスタイルの画像 CSS画像反射 CSSオブジェクト適合 CSSオブジェクトの位置 CSSマスキング CSSボタン CSSページ付け CSSの複数の列 CSSユーザーインターフェイス CSS変数 CSSボックスのサイズ設定 CSSメディアクエリ CSSMQの例 CSSFlexbox

CSSレスポンシブ

RWDイントロ RWDビューポート RWDグリッドビュー RWDメディアクエリ RWD画像 RWDビデオ RWDフレームワーク RWDテンプレート

CSSグリッド

グリッドイントロ グリッドコンテナ グリッドアイテム

CSS SASS

SASSチュートリアル

CSSの

CSSテンプレート CSSの例 cssクイズ CSS演習 CSS証明書

CSSリファレンス

CSSリファレンス CSSセレクター CSS関数 CSSリファレンスオーラル CSSWebセーフフォント CSSアニメーション可能 CSSユニット CSSPX-EMコンバーター CSSの色 CSSの色の値 CSSのデフォルト値 CSSブラウザのサポート

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=effectnamefont-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