ページトップへ

GoogleFonts[グーグルフォント]の使い方(複数のフォントを一気に指定)

今更ながらgoogle web fontの使い方を解説。
複数のフォントをまとめて1つのCSSで使う方法を主に解説します。


まずは Google Fonts のページにアクセス。


すると以下の画面が表示されます。
g001


  • フォントの名前がわかっている場合は、ここにキーワードを入力すると絞り込まれます。
  • カテゴリフィルター。カテゴリを絞り込みたい場合は選択。基本はAll categoriesで問題無いです。
  • フォントの大まかなスタイルで絞込ができます。
    [Thickness]、[Slant]、[Width]の文字をクリックすると下記のようにスライダーが表示されます。
    スライダーが表示されている=絞り込みの有効となるので、絞り込みが必要のない項目は閉じておきましょう。 g002

    [Thickness]
    太さの絞込。
    スライダーがthinの方に行くほど細め、thickに行くほど太めのフォントが絞りこまれます。

    [Slant]
    ゴシック体と筆記体の絞込。
    スライダーがstraightに行くほどゴシック体に近く、slantedに行くほど筆記体のように崩したフォントが絞りこまれます。

    [Width] 文字間の絞込。
    スライダーがnarrowに行くほど狭く、wideに行くほど広いフォントが絞り込まれます。

    スライド幅が極端に左右になると、該当するフォントがなくなりますので注意。

  • 表示されているフォントをどのようにプレビュー表示させるか選択できます。
    [Word]
    単語表示。

    [Sentece]
    一文表示。

    [Paragraph]
    段落表示。

    [Poster]
    見出しっぽい表示。
  • Poster以外の場合は自分で入力したテキストでプレビューできます。
    Preview Text欄に任意の「英数字」を入力しすると自動的にプレビューの文字が変わります。
    フォントのサイズも変更できます。
  • 気になったフォントがあればAdd to Collectionをクリックしてキープしておくことができます。
    クリックすると下記のように下にフォント名が表示されます。
    あとで比較できますので、気になったものがあればどんどんCollectionに加えていきましょう。

g003
  • キープしておいたフォント名が表示されています。
  • [Review]を押すと、Collectionに加えたフォントのみで文字を比較できます。
    [Use]を押すとCollection内のフォントすべてを1つのCSSに落としこむことができます。

[Review]を押した場合、下記の画面が表示されます。
g004
  • [Headline]を選択すると1行文字のみ、[Paragraph]を選択すると段落表示で表示できます。
    それぞれのフォント同士を見比べることができて便利です。

[Use]を押した場合、画面下部に下記の項目が表示されます。
g005
  • フォントの使い方を選択できます。
    [Standard]
    基本的な使い方。
    フォントを使いたいページのHTMLのhead部分に表示されているコードを貼り付けます。

    [@import] CSSファイルからさらにgoogleフォント用のCSSを読み込む方法。
    使用したいページで読み込んでいるCSSファイルの最上部に表示されているコードを貼り付けます。

    [Javascript] javascriptを使ってgoogleフォントを使用する方法。 フォントを使いたいページのHTMLのhead部分に表示されているコードを貼り付けます。
  • googleフォントを適応させたい要素に表示されているコードを適応させます。
    例:
    .change {
      font-family:’Lato’, sans-serif;
    }


Collectionに複数のフォントを加えた状態で「Use」を押すと、複数のフォントをまとめて一つのCSSに落としこむことができ、大変便利です。

以上、今更ながらですがGoogle Fontsの使い方でした。
2015年03月22日

お問い合わせ

お名前 (必須)

メールアドレス (必須)

メッセージ本文(必須)

自動返信メールが送信されます。
返信メールが届いていない場合は正しく送信できていない可能性がございます。