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

| コメント(0) | トラックバック(0)

前回の記事で紹介しましたHTML5&CSS3で実現できた機能:Webフォントを実際にサイトに適用させてみましょう。

このWebフォントについての概要は過去の記事をご参照ください。

2013年4月25日現在のGoogle Webフォントサイトでの設定方法の記事

またWebフォントを利用した事例サイトは「ちょっと一服ブログ」にも掲載しています。ご確認ください。※こちらでは日本語のWebフォントの事例も記載されています。(ただし日本語については2012年末までの試用版です)

 

それではまず、GoogleのWebフォントを提供しているサイトを開きます。(左記リンクからどうぞ)

※Googleのサービスは現状、英語のみのフォント提供です。

下記サイトが表示されます。

googleのwebフォントサービス

 

ここでは練習で一番上のフォント(字体)を設定してみたいと思います。

そのフォントの右下のあたりに「Quick use」という文字がありますので、それをクリックしてください。

Webフォントの選択

 

そうすると下記画面が表示されます。 スクロールを下に動かしていってみましょう。

Google webフォント画面

 

スクロールして画面下の方に移動していくと下記の「3, Add this code to your website」という文字(青地で白文字)の部分が確認できるはずです。

Webサイトに貼り付ける必要があるコードは下記画面の「3」と「4」の2つです。 とりあえず「3, Add this code to your website」と「4, Intefrate the fonts into your CSS」の2つのコードをコピーして、メモ帳などに貼り付けておくか、このGoogleWebフォントのページとは別で、自分のサイトの管理画面もしくはHTMLファイルなどを開いてください。(以下Movable Type5での設定方法で説明します。それ以外の方はそれぞれの環境に合わせ適宜変更箇所は変えてください)

Google Webフォントのコード取得

 

コードを管理画面から貼り付けます。

貼り付けたイメージは下図をご確認ください。 この際右上のフォーマットが「なし」になっていることを確認しておいてください。

Webフォントコード貼り付け

 

次のWebフォントを適用させる文字列のところにGoogleのWebフォントのサイトの「4, Intefrate the fonts into your CSS」のコードを貼り付けます。

なので、「4, Intefrate the fonts into your CSS」のコードをまずコピーしておきましょう。

 

Webフォントを適用させる文字列(現状は半角英数字のみにしか適用できません)にスタイルシートで記載します。

ここでは<div>というタグに設定した例でご説明します。 文字列を<div></div>で囲って記載します。 その<div>タグにスタイルシートでコピーした「4, Intefrate the fonts into your CSS」のコードを追記します。

例)

オリジナル:
<div>This is a pen.</div>

Web フォント指定のコードを追記:
<div style="font-family: 'Butterfly Kids', cursive;">This is a pen.</div>

※青文字部分はGoogleのサイトからコピーした文字列。赤文字の部分もこの通り追記してください。

下が実際に適用した文字列です。

 

This is a pen.

 

1回操作してしまえばそれほど難しくはないかと思いますが、できましたでしょうか。

いろいろとお試しください。

 

詳しいかたでわかる方は、コードの貼り付けもHMTLのlinkではなくインポートで指定したりなど、コードが3種類提供されていますので、それぞれの環境ややり方に合わせ、お試しください。

 

また日本語のフォントも無料でいくつか利用できるものがあります。「webフォント 無料 日本語」などで検索でいくつかのサイトがでてきますので、お試しください。 (いいものは有料のものが多いですね。)

 

こういった内容の勉強会も静岡、浜松、豊橋、群馬のIT勉強会「駿河友の会」では随時取り上げていきたいと思います。

駿河友の会への入会や内容についてのお問い合わせは、「駿河友の会」ご紹介サイトお問い合わせからどうぞ。

トラックバック(0)

トラックバックURL: http://www.surugatomo.com/mt/mt-tb.cgi/509

コメントする