ここにキーワードを含むページの見出しを記入

Google Fontsの使い方

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