[基礎編] [ウェブデザインの応用] Webフォントとは?Google Web Fontsの使い方 | 中国短期大学情報ビジネス学科メディア科目ブログ WEBCRE8TOR.COM

この記事の目次

Google Web FontsでWebフォントを使ってみよう

今回はWebフォントとは何なのか?そしてGoogle Web FontsのWebフォントを使い方を解説します。

Webサイトを閲覧する場合、
フォントというものは基本的にPCの中にインストールされていないと表示できないこと、
万人のPCに自分が使ったフォントがインストールされているわけではないことは、
以前講義で少し触れたかと思います。

しかし今回解説するWebフォントを使えば、
ほとんどのデバイスで同じフォントを比較的簡単に表示することができるようになります。

Webフォントは、Webサイトの画像やテキストと同じ扱いで、
そのフォントデータをウェブサーバー上に置き、
PCからWebサーバーにリクエストを送って読み込むことで、
各々のPCにインストールしていないフォントでも表示することができるという技術です。

Google Web Fontsは最も有名なWebフォントの一つです。
様々なフォントが用意され、しかも全て無料で使用することができるため、
手軽にWebサイトにWebフォントを導入することができます。

Google Web Fonts

まずはGoogle Web Fontsにアクセスしてみましょう。

様々なフォントがありますね。
今回はこの中から「Crimson Text」というフォントを例にとり、Google Web Fontsの使い方を説明します。

上部の「Search fonts」と書いている検索ウィンドウに「Crimson Text」と打ってみましょう。
すると左側に検索キーワードに該当するフォントの一覧が表示されますので、「Crimson Text」のブロックをクリックしてみましょう。

クリックすると「Crimson Text」フォントの詳細ページが開きます。
ページを少しスクロールすると「フォントスタイル(太さなど)」の一覧が表示されます。
ここでは一番上の「Select Regular 400」のテキストリンクをクリックしましょう。

クリックすると右側に「Selected family」というサイドメニューが開きます。
これは、クリックして選択したフォントをWebサイトで使用する際に必要なコードを表示したブロックです。

「Use on the web」というブロックにコードが記述されたブロックが2つ表示されます。
ここに表示された上のコードをhtmlファイルの<head></head>タグ内に、
下のコードをフォントを使用したいセレクタに対して指定すると、
Webフォントを使用することができるようになります。

今回はCrimson Textを使いましたが、Google Web Fontsにはとても多くのWebフォントがあり、
日本語のフォントもかなりラインナップされています。他のフォントもぜひ使ってみてくださいね。