W3.CSSGoogleフォント
W3.CSSを使用すると、新しいフォントを非常に簡単に追加できます。
- 非常に使いやすい(CSSとHTMLのみ)
- 外部フォントライブラリの無制限の使用(Google Fontsなど)
- 最新のすべてのブラウザで動作します
これはRobotoです
これはソフィアです
ソフィアオンファイア
ウェブを作る!
ウェブを作る!
ウェブを作る!
ウェブを作る!
ウェブを作る!
GoogleFontsの使用
Google Fontsは無料で使用でき、1000以上のフォントから選択できます。
Webページの先頭で、Googleフォントにリンクします。
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
次に、それを使用する場所に関するCSSを追加します。
body,h1,h2,h3,h4,h5,h6 {font-family: Roboto, sans-serif;}
もう一つの例
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sophia">
body,h1,h2,h3,h4,h5,h6 {font-family: Sofia, serif;}
フォントクラスを作成する
Webページの先頭で、Googleフォントにリンクします。
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sophia">
次に、フォントクラスを作成します。
例
.w3-sofia {
font-family: Sofia, cursive;
}
Webページで、フォントクラスを使用します。
例
<p class="w3-sofia">Making the Web!</p>
ウェブを作る!
例
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
.w3-tangerine {
font-family: 'Tangerine', serif;
}
<p class="w3-tangerine">Making the Web Beautiful!</p>
ウェブを作る!
例
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster">
ウェブを作る!
例
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster&effect=shadow-multiple">
ウェブを作る!
例
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Allerta+Stencil">
ウェブを作る!