Google Web Fontsで利用したい文字だけを指定する
2017/01/31
こんにちは、okutani(@okutani_t)です。Webサイトで使うロゴ等に「Google Web Fonts」というサービスを利用することで、ロゴ画像を用意しなくても簡単＆カッコいいロゴがお手軽に実装できます。
今回は、そのGoogle Web Fontsで「使いたい文字だけ読み込む」設定にして、できるだけ通信容量を小さくする方法を説明していきます。
設定はとてもかんたんなので、お気軽にお読み下さい。
スポンサーリンク
Google Web Fontsを読み込む
Google Web Fontsを読み込むには、HTMLファイルのヘッダー内に下記コードの形式で記述します。
<link href='http://fonts.googleapis.com/css?family=Stalemate' rel='stylesheet' type='text/css'>今回は「Stalemate」というフォントを使って、ポートフォリオサイトのタイトルをロゴっぽく表示させてみました。
ここでは「okutani’s Portfolio」という文字だけを読み込んで使いたいので、下記の通り「&text=」をくっつけて指定します。
<link href="http://fonts.googleapis.com/css?family=Stalemate&text=okutani's Portfolio" rel='stylesheet' type='text/css'>この時に気をつけたいのは
- 「’」を文字として使いたい場合、hrefを「”」で囲む
- スペースも入力する
- 大文字小文字は区別して記述する
の3つです。ちなみに、重複している文字は１つにまとめられるので
okutani’s Prflと記述してもOK。
Google Web Fontsをロゴとして使っている人は、上記の設定で通信容量を1/5以下ぐらいにすることができます。
色々な種類のWeb Fontsを利用している場合は特に有効な設定なので、ぜひこの機会に試してみてはどうでしょうか。
Web開発のお仕事を募集しています
フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。
「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。
ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。
LINKお問い合わせ
スポンサーリンク
