Google Font API 魅力的なWebフォントを自分のブログやWebページに表示する

Google Font APIとは?

Google Font APIとは、オープンソースのGoogle Web Fontsを自分のブログやWebページで利用するためのAPIです。

Google Font API Webフォント

Google Web Fonts: http://www.google.com/webfonts

Webフォントとは、サーバー上のフォントを利用することで、クライアントのOSやブラウザに依存することなく、同じフォントを表示できる機能です。

Google Font APIでは、CSSをリンクするだけで、Google Web Fontsに登録されているWebフォントを、自分のブログやWebページに表示することができます。

Google Font API CSSをリンクするだけでWebフォントを表示

Google Font APIを利用してWebフォントを表示するには、まず、HTMLのhead要素にCSSへのリンクを追加します。

<link href="http://fonts.googleapis.com/css?family=Nunito" 
rel="stylesheet" type="text/css" />

「family=」パラメーターで、表示したいWebフォントの名前を指定します。

Google Web Fontsからお気に入りのフォントを見つけたら、そのフォント名をパラメーターに指定しましょう。

あとは、Webフォントを適用したいCSSセレクタで、Webフォントを指定するだけです。

CSS selector {
  font-family: 'Nunito', sans-serif;
}

Google Web Fontsには、日本語フォントは用意されていないので、ゴシック体の場合は「sans-serif」を、明朝体の場合は「serif」を追加しておきましょう。

なお、Firefox 4.0.1やGoogle Chrome 11では、問題なく表示されましたが、古いブラウザでは表示されないこともあります。

デベロッパーツールの関連記事一覧 - Webアプリのいいところ

Chrome拡張のいいところ 関連コンテンツ

この記事に対してトラックバックを送信する(FC2ブログユーザー)
http://chromeapp.info/tb.php/316-ad127c4a

0件のトラックバック

0件のコメント

コメントの投稿

投稿フォーム
投稿した内容は管理者にだけ閲覧出来ます

Copyright © 2008-2017 Chrome拡張のいいところ. All Rights Reserved.

スポンサードリンク

Chrome拡張の最新記事

Time Calculator 経過時間と積み重ね時間をシンプルに計算するChrome拡張の電卓 2017/04/25

Print Image Pro - Webページの画像を用紙全体にフィット印刷するChrome拡張 2017/04/18

Volume Controller - Chromeに独自のボリュームコントロールを追加する拡張機能 2017/04/11

Link Text Color Chrome拡張 リンクの色を強制的に標準の色(青と紫)に変更できる 2017/04/04

Iconic History Chrome拡張 履歴をファビコンだけでコンパクトに表示する 2017/03/28

Date Highlighter Chrome拡張 Google検索結果で日付だけをハイライトできる 2017/03/21

Download Notify Chrome拡張 ダウンロードの完了をサウンドで通知してくれる 2017/03/14

coordinates Chrome拡張 マウスポインタの座標をツールチップに表示する 2017/03/07

Amazon


Dragon Touch Y88X 7インチ タブレットPC クアッドコア Google Android 5.1 IPS液晶ディスプレイ


Hobest ワイヤレスヘッドフォン 充電用ケース付き ミニステレオBluetoothイヤホン


高速充電多ポートUSb充電器 7ポート多用途

ブログ「Chrome拡張のいいところ」について

おすすめのChrome拡張機能や設定を紹介するブログです。

ご連絡はこちらまでどうぞ
sg.inagaki@gmail.com

RSS Feed