vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです

Google Web Fontsで利用したい文字だけを指定する

      2017/01/31

LINEで送る
Pocket

google-web-fonts-text-select
こんにちは、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」というフォントを使って、ポートフォリオサイトのタイトルをロゴっぽく表示させてみました。

google-web-fonts-text-select

ここでは「okutani’s Portfolio」という文字だけを読み込んで使いたいので、下記の通り「&text=」をくっつけて指定します。

<link href="http://fonts.googleapis.com/css?family=Stalemate&text=okutani's Portfolio" rel='stylesheet' type='text/css'>

この時に気をつけたいのは

  • 「’」を文字として使いたい場合、hrefを「”」で囲む
  • スペースも入力する
  • 大文字小文字は区別して記述する

の3つです。ちなみに、重複している文字は1つにまとめられるので

okutani’s Prfl

と記述してもOK。

Google Web Fontsをロゴとして使っている人は、上記の設定で通信容量を1/5以下ぐらいにすることができます。

色々な種類のWeb Fontsを利用している場合は特に有効な設定なので、ぜひこの機会に試してみてはどうでしょうか。

参考okutani's Portfolio

LINEで送る
Pocket

okutani (@okutani_t) のヒトコト
自分のPortfolioサイトの読み込みが遅かったので設定してみました。読み込みを非同期にしてさらに通信容量を小さくする方法もあるらしいので、今度設定してみます。

 - Googleサービス

スポンサーリンク

PC用AdSense

PC用AdSense

  こちらもどうぞ

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。