Webを彩る Google Fonts 簡単にWebサイトのフォントを豊富に変更できる

PR

CSSでサイトの文字のフォントを指定する場合は
そのPCに入っているフォントが使われることになりますが

Google Fonts を使うことで、色々なフォントが使え表現が広がります

 

Google Fonts の使い方

Google Fonts

 

Google Fonts のサイトに行くと多くのフォントが並んでいます
その中から利用したいフォントをコレクションに追加していきます
(Quick Use というものも有り、1つだけフォントを使う場合に利用します)

この Add to collection のボタンで追加する事が出来ます

WS000519

 

WS000514

フォントの数が膨大なので、フォントは各メニューから絞込み出来ます

  • Word はタイトル
  • Paragraph は文章
  • Poster はロゴ

としてそれぞれ探すと見つけやすいかと思います

また左のフィルターからはボタンをスライドして絞り込みすることも出来ます

コレクションに追加したものを一括して利用するには画面したの
コレクションのところからUSEをクリックすると導入へのステップの画面になります

WS000520

まず、コレクションに入れたフォントから利用するフォントの選別をします
利用するものにはチェック

WS000521

あとはHTMLに追加するコードと
フォントを変えるためのCSS このCSSをWebフォントを当てたいテキストに適応します

WS000522

 

Google Fonts を利用する注意点は日本語が無い
また一部のWebブラウザで日本語表記に使うと表示されない現象があるので

英数字のみに利用するといった使い方になります

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)