【Web Fonts】Google Fontsを使ってみた。

シェアする

  • このエントリーをはてなブックマークに追加
  • 12

ポートフォリオサイト作成の際に、Google fontsを初めて使ってみました。また使うときに困らないように、備忘のためのメモ。

■フォントを探す
まずは指定したいフォントを探します。
Google fontsで探そうとしたら、フォントの数が多くて好みのフォントがなかなか見つからず…。

「Google fonts おすすめ」などで検索していくつか見た中で、この記事を参考にしました。

PHOTOSHOP VIP - Googleフォントを利用している、参考お手本Webサイトデザインまとめ

こちらに載っていた、「Sorts Mill Goudy」というフォントを使用することに。

■フォント設定はすごく簡単!
フォントの設定の仕方はこちらの記事を参照。

OZPAの表4 - 今さらながらWebフォント「Google web fonts」の使い方・実装手順メモ
  1. Google fontsのサイトで指定したいフォントを検索。
  2. フォントの「Quick Use(矢印アイコン)」をクリック。
  3. 「3. Add this code to your website」に記載のコートをheadタグの中に追加。
  4. で、そのフォントを指定したい要素に「4. Integrate the fonts into your CSS」に記載のfont-familyを指定するだけ。

フリーフォント(Webフォント利用可のもの)のファイルを、ディレクトリ内に置く形でWebフォントを利用したときには、ブラウザによって指定が効かなかったりといろいろと苦労したので、Google fontsもやり方を調べるまでは何となく「難しいんじゃ…」と思ってたんですが、なんだ全然難しくない!むしろ簡単じゃないか!!!とびっくり。

しかしGoogle fontsには、ざっとググった限りだと日本語フォントはない模様…。そこが唯一残念です。その内日本語フォントも提供されるといいなぁ。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする