GoogleのWebフォントサービス「Google Fonts」を使おう

goto_jp 480views 更新:2014年4月4日

「Google Fonts」を使うことでごく簡単にデザイン性の高いWebフォントを使えるようになります。

Google Fonts
Google Fonts

使い方

左側のFiltersより形状で検索でき、使いたいフォントを見つけたら「 (Quick-use)」をクリック。

ウェイトを選択する画面になるので、使いたいものをいくつかチェックしてください。

3. Add this code to your website:」より埋め込みたい形式でHTMLやCSSに埋め込み。
例えばCSSから読み込む場合は下記のコードを埋め込むことになります。

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700);

次は「4. Integrate the fonts into your CSS:」に従って、読み込んだフォントをCSSのfont-familyで指定するだけです。
例えば下記のように指定します。

body {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
}

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません