Google Web Fontsの使い方

2018/03/23更新 カテゴリー:開発奮闘記 タグ: , ,
  • このエントリーをはてなブックマークに追加

Google Web Fontsの導入が超絶かんたんだったので、導入までの流れをご紹介します。

SPONSOR

WebFontとは

通常は見ている人のパソコンに入っているフォントしか使うことはできません。しかし、WebFontを使えば、見ている人のパソコンの中にフォントが入っていなくても、好きなフォントを使うことができます。これはフォント自体をサーバー上に置いておくことで、これを実現しています。

Google Web Fontsでは無料で使える英語フォントが700件近く登録されています。ここで好きなフォントを探して、Webサイトで使うことができます。ちなみに、英語に比べて日本語は漢字やカタカナなど、データ量が圧倒的に多いため、まだ実用的ではありません。

これから、Retinaディスプレイなど、スマートフォンにかぎらず高精細なディスプレイが増えていけば、今までの画像テキストはぼやけてしまうほか、複数の解像度の画像を準備する手間が増えます。そんなこともあって、こういったWebフォントを活用する場面が増えていくと思います。テキストならいくら拡大しても綺麗なままですので、使い勝手もいいですよね。

Google Web Fontsの使い方

Google Web Fontsを開きます

google
好きなフォントがあれば、Quick-useボタンを押してみてください。

タグをコピー

google2
表示されているCSS読み込みのタグをコピーして、使いたいページで読み込ませます。あとは好きな場所でfont-familyでフォントを指定すれば使えます。
google3
変更もしやすいですし、おすすめです。

Google Web Fonts

フリーランスエンジニアの稼ぎ方

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

PROFILE

プロフィール

入江 慎吾
自分が作ったサービスで生きていく。同じゴールを目指すサービス開発集団「入江開発室」を運営(現在約280名) / 個人間スキルシェアサービス「MENTA」は約1ヶ月で売上100万円を達成。1日で100社が利用した「JobTag」など多数開発
(詳しいプロフィール)

PRODUCT

イリテクで開発したプロダクト

RELATION

関連する記事

SPONSOR

TAG

タグから記事をさがす