Google Web FontsでWebフォントを使う


Google Web Fonts

大変かと思ったけれどかなり簡単に使えるので、綺麗に見えるフォントを使いたいという場合はオススメです。英字フォントは容量も軽いので問題なし。日本語フォントは容量重いのでちょっと厳しいかもしれない。

動作サンプル

例として、QuicksandというWebフォントを使いたければ、CSSファイルに以下のような感じで記述すればOKです。

@import url(http://fonts.googleapis.com/css?family=Quicksand);
body{font-family:'Quicksand', sans-serif;}

実に簡単です。

ただ、フォントが小さいと文字が潰れて読めなくなってしまう場合があります。(普通のフォントではあまり見ない気がする。)

意図したフォントを探すには、Searchから検索するか、Filtersで好みの条件を指定するといろいろ出てきます。フォントの読み込みの方法は、各フォントの「Quick-use」というリンクから見ることができます。

webfonts_search

webfonts_use

注意点として、ブラウザの設定でWebページのフォントを優先するような設定になっていないと、ブラウザ自体の設定が優先されて、Webフォントでの表示がされなくなります。Firefoxで動かない!という事態になったのですが、原因はそれでした。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です