vdeep

*

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

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

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

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

 - Googleサービス

スポンサーリンク

PC用AdSense

PC用AdSense

Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

Google Analyticsで自分のスマホのアクセスを除外【iPhone, Android】

こんにちは、okutani(@okutani_t)です。サイトをはじめたばかりの …

マインドマップで頭の中を整理!クラウドで使える「MindMup」が良い感じ

最近やりたいことがパンクし始めてるokutani(@okutani_t)です。i …

自分のアクセスを完全に除外する「Google Analytics オプトアウト アドオン」

休日はMacBookAirでスタバってる(スターバックスでコーヒータイム)、ok …

Google Analyticsで自分のアクセスを除外する (IPアドレスを使った方法)

Google Analyticsを使うことで、簡単に自分のサイトのアクセス解析を …

Google Analyticsの登録&設置方法。サイトのアクセスを解析してみよう!

こんにちは、okutaniです。『Google Analytics』を利用すると …

Google AdSenseに登録してみよう!一・二次審査〜広告の作成まで

こんにちは、okutani(@okutani_t)です。Google AdSen …

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