webフォントの使い方GoogleFontは遅い所か早い

所要時間目安：約 2 分

This session is using　 IPv4 　is established in

ECUをリセットする方法。アイドリング不安定だったのでしょうがなく

記事の上に今日の人気記事を表示する方法

この記事は2016年2月27日のものです。現在は状況が異なる可能性がありますのでご注意ください。

Stinger6 WordPress

目次に行く･戻る

+本日の人気記事TOP10+

メルカリ招待コード：

GoogleFontスクショ

ブログやホームページを運営していくにあたり時折他のPCで自分のブログやホームページを表示した所、
自分のPCでの文字表示（フォント）が異なってしまいデザイン自体が崩れたりしました。

しかし、
現在ではwebフォントは出た当初より遅くはないです。

特にgoogle webフォントは非常に早いです。

そこで、
当ブログでもwebフォントを使用してみました。

アドセンス336pxPC閲覧記事下表示1つ目コード

これで、

使用しているPCにインストールされているフォントに依存することなく、
自分のPCで表示確認した際と同じように表示されることになります。

で導入方法・使用方法・使い方ですが、

導入方法は、
以下の3段階でおおむね可能（終了）で簡単です。

おそらく5分くらいでできます。
（人にもよりますが…。）

Google Fontsでフォントを選択する
CSSを追加する
font-familyで適用する

まずは、上記GoogleFontのサイトへアクセスします。

その後いくつかあるwebフォント（GoogleFont）の中で気に入ったものを選びます。

上記画像のようになるので、
赤枠内に自分が決めているならそこにwebフォント名を入力して選択します。

決めていない場合は、
じっくりといろいろ見て決めると良いと思います。

私は、
Linuxの派生ubuntuで有名なフォントを選びました。

その後、webフォントを決めたら以下画像の赤枠内をクリックします。

GoogleFont選択

そうすると、
次に以下の画像のような画面に推移します。

GoogleFont選択ubuntu

ここでも自分の好みに合ったフォントスタイルをチェックします。

次に、
下の方にスクロールして「3」の部分で「@import」という所をクリックします。

GoogleFont選択import

ここの@importに表示されたコードを自分のスタイルシート（CSS）の一番上の部分に記述します。

次に、
さらに下にスクロールして「4」という部分にてCSSを記述します。

GoogleFontのCSS

こんな感じです。

GoogleFontをCSSに記述

具体的には、

以下のようにコードを記述します。

@import url(https://fonts.googleapis.com/css?family=Ubuntu);

* {
 font-family: 'Ubuntu', sans-serif;
 }

テーマに@importがある場合はその直下に記述します。

以上で、
webフォントの導入が完了です。

これで、
PCにインストールされているフォントに依存することなく自分のブログやホームページが表示されるようになります。

最後に、

ところでwebフォントって何？とい話しですが…。

Google Fontsとは、
Googleが提供している商用利用可能な無料のWebフォントです。

そもそもwebフォントとは？

元来、Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてしまう。フォントを画像にして表示するという手はあったが、文章修正のメンテナンス、文章の検索といった点で問題がある。そこでWebサーバー上にフォントファイルを置き、Webデザイナーの意図するフォントを表示できるようにした技術がWebフォントである。またはWebサーバー上に置かれるフォント自体をWebフォントと指し、フォントをWebで利用するよう提供するサービスをWebフォントサービスとして区別する。
日本語はひらがな、カタカナ、特に漢字が膨大な数であり、Webフォントのダウンロード量など、英語や欧文と比較して課題がある。例として2010年にサービスを開始したGoogle Web Fontsでは日本語は提供されていない[1][2](2013年現在)。しかし2010年、2011年頃から日本語に対応したWebフォントサービスが開設されている

引用元）

Webフォント

WebフォントはWWW上からフォントを表示する技術である。HTMLにおけるフォントのダウンロードはCSS3.0 fonts moduleにて内包された。

Wikipedia

「Stinger6, WordPress」同じカテゴリーの記事一覧

: Stinger6トップページ記事間にアドセンス広告を表示・入れる方法

: WordPressプラグインなしでコンタクトフォームを作成方法

: スマホやモバイル端末でサイドバー非表示・削除にする方法

: Stinger7にテーマ変更してみたが…。

: カエレバ・ヨメレバをCSSでカスタマイズする方法

: WordPressブログカード作成方法

あなたにおすすめ

: WordPress 不具合
WordPressビジュアルエディタで見出しタグが挿入できない場合の対象方法
WordPressにて、ブログを始めたのはここ数日前です。しかし、 WordPressのビジュアルエディタにて、見出しタグの挿入時に範囲選択した場所以外も見出しタグが挿入されてしまう。という現…
もっと読む

インフィード広告アドセンス

: php WordPress カスタマイズカスタマイズ伝えたいこと備忘録
プラグインなしで人気記事ランキング表示方法（とりあえず簡単な方法と詳細方法）
ずっとプラグインを使用しないでポピュラーポスト（Popular Post）ランキングを表示したいと考えていました。有名所のプラグインではWordPress Popular PostsやPost Vie…
もっと読む

インフィード広告アドセンス

: WordPress アップグレードカスタマイズ不具合伝えたいこと備忘録時事ネタ
WordPress4.7が12月6日にリリースされるけれど、不具合とか大丈夫かなぁ。
ついこの間WordPress自体のバージョンアップを新しい4.6.1が公開されてから行ったばかりなのに・・・・・・。こう今月の12月6日には新しいWordPress4.7バージョンが公開されるようです…
もっと読む

インフィード広告アドセンス

: WordPress カスタマイズカスタマイズ伝えたいこと備忘録
パーマリンクURLを自動一括リダイレクト方法htaccessにて
サイトやホームページのURLはパーマリンクURLといい唯一無二のアドレスになります。そのサイトURLのパーマリンク設定URLをサイト移転などをした際に、記事数やホームページのURL数が多いとリダイレク…
もっと読む

インフィード広告アドセンス

: WordPress カスタマイズ伝えたいこと備忘録
ショートコード作り方テンプレートから呼び出す方法などいろいろ
ショートコードって学べば学ぶほど色々な活用方法があるんだなぁ。と実感している毎日です。もちろん、他にも様々な関数を使ってもっともっと多くのカスタマイズなどができると思います。今の私には、そこまで…
もっと読む

インフィード広告アドセンス

: WordPress カスタマイズカスタマイズ伝えたいこと備忘録
YouTube動画が遅い。重い時、掲載しても遅くならない方法
すごいっ！！ YouTubeの動画をブログに貼り付けても重くならない・遅くならない方法があったなんて…。 WordPressでも応用可能かと思って試してみました。たぶん、多くのテーマでも可能なのでは…
もっと読む