オープンソースのWebフォントが使えるサービス「Google Fonts」



Googleのサービス1つ「Google Fonts」の紹介です。

Webフォントは Webデザイナーさん以外には 馴染みが薄いと思いますが、ザックリ言うと「サーバー側からフォントを引っ張ってきて、そのフォントで綺麗にWebページを見てもらおう!」という仕組みです。

<!-- html上ではこのような感じで使います -->
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">


そういうWebフォントが無料で使える主要なサービスが「Google Fonts」なのですが、今回リニューアルされて より便利になりました。

*リニューアルされたGoogle Fontsのページ
Google Fonts


Google Fonts上では現在800種類以上のWebフォントが公開されていますが、リニューアルされてフォントの検索が楽になりました。

一般的な" Sans Serif " や、手書き風の " Handwriting "の等のフォントカテゴリでの絞り込み、その他に対応しているフォントの言語からの検索などに対応。ほぼワンページ内で完結できます。
( * 現在のところ日本語フォントは用意さていません )

右のメニューバーでタイプを指定すると、リアルタイムでフォントが切り替わり、インタラクティブにフォントが検索出来ます 

ページスタイルも変更することができ、フォントのデザインも確認し易くなりましたね 


カテゴリやタイプなどの条件をかけてフォントの検索以外に、Webフォントとして使う場合も操作が簡単になりました!

1: + ボタンをクリックして使いたいフォントを指定 

 2: ページ下にポップアップが現れます

3: ポップアップをクリックすると選択したフォントの情報がクリックされ、Webページで使う時に必要なタグが表示されます !  
* 右のカスタマイズ項目からフォントの大きさ等も指定可能
 


その他にも、Google Fontsの便利なところは、Webフォントだけではなく '.ttf'形式としてダウンロードも出来ます。

tty ( TrueType )とフォントとして入手出来るということは、WindowsやMac, Linux 等の各種OS上でも使用できます。

フォントのダウンロードは下の丸で囲まれたボタンを押すと開始されます


テストの為に " Pacifico "という手書き風 + 筆記体のフォントをインストールして自身の環境に導入してみました!

フォントの詳細ページに各authorの情報や、ライセンスが明記されているので、実際に使う時は確認してください

Pacificoフォントを使って下記のSQL文を書いてみました!当たり前のことですが、フォントが変わると印象も随分変わっています。

select * from `articles` 
 where `articles`.`deleted_at` is null 
  and `published_at` is null 
  and `active` = '0' and `published_at` is null 
 order by `updated_at` desc limit 20 offset 0

SQL文なのに随分オシャレに見えます


Summary

以上がGoogle Fontsの紹介でした。

日本語という文字環境のため、「100% Webフォントに置き換える!」ということは難しいですが。使える場面もけっこうあります。

また、フォント毎にライセンスも表記されているので、「どの場面で使用できるのか?」等の確認もしやすくなっています。
( "Apache 2.0"ライセンスや "Open Font License"で提供されている印象が多く見受けられました )

Webデザイナーさんや、画像を扱うグラフィックデザイナーさん、その他アプリケーションのUI等に使いドコロが沢山あるので、気になった人はゼヒ×2チェックしてみてください!

Google Fonts

 

この記事のカテゴリ
IT・ガジェット

この記事のタグ