-
Google Fontsから使用したいフォントを選びます。
- Preview Textやsizeで任意の文字や、サイズを変更して確認もできます。
|
|
-
使用するフォントのをクリック。
-
項目1,2でフォントのスタイルなどを選択します。
-
項目3の<link href・・・のコードをコピーします。
|
|
-
head部分にペーストします。
<link href='http://fonts.googleapis.com/css?family=Prosto+One' rel='stylesheet' type='text/css'> </head>
-
項目4のfont-family:・・・のコードをコピーします。
|
|
-
スタイルシートにてペーストしてフォントを適用します。
#logo {
font-family: 'Prosto One', cursive;
}
-
body部分にコードを記述します。
<div id="logo">
<a href="index.html">sample template</a>
</div>
- 確認して完成です。(下記参照)
<補足>
2種類以上のフォントを使用したい時はhead部分にペーストした<link href・・・のコードのフォント間に|を入れて追加します。
<link href='http://fonts.googleapis.com/css?family=Prosto+One|Poller+One' rel='stylesheet' type='text/css'>
スタイルシートで使い分けます。
#logo {
font-family: 'Prosto One', cursive;
}
.mainmenu {
font-family: 'Poller One', cursive;
}
|