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

所要時間目安：約2分

This session is using　 IPv4 　is established in

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

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

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

Stinger6 WordPress

本日
週間
月間

エクストレイルT32おすすめバッテリーPanasonicカオスバッテリー 3PV
すべての車でバッテリーが搭載されています。特にアイドリングストップ車以降現在主流になりつつある電気自動車などではバッテリーの性能がとても重要になってきます。今回は日産エクストレイルT32においておすす…
もっと読む
TOYOTAキーレスリモコンの設定方法とキーナンバー（キー番号） 2PV
この度は（今回は？）、プラスチックの経年劣化により車のキーレスリモコンキーの送信機側（トランスミッター）のみをなくしてしまった場合です。（まだスマートキーやインテリジェンスキーと言われる前のキーレスリ…
もっと読む
ヘッドライトクリーニングにダイソーアルカリ電解水で黄ばみクスミが綺麗に 1PV
ヘッドライトは経年劣化で黄ばんできてしまいます。特にここ10年くらいの車のヘッドライトはプラスチック製のヘッドライトカバーになってきています。昔のようにガラスではありませんので、より経年劣化が目立って…
もっと読む

エクストレイルT32おすすめバッテリーPanasonicカオスバッテリー 3PV
すべての車でバッテリーが搭載されています。特にアイドリングストップ車以降現在主流になりつつある電気自動車などではバッテリーの性能がとても重要になってきます。今回は日産エクストレイルT32においておすす…
もっと読む
TOYOTAキーレスリモコンの設定方法とキーナンバー（キー番号） 2PV
この度は（今回は？）、プラスチックの経年劣化により車のキーレスリモコンキーの送信機側（トランスミッター）のみをなくしてしまった場合です。（まだスマートキーやインテリジェンスキーと言われる前のキーレスリ…
もっと読む
ヘッドライトクリーニングにダイソーアルカリ電解水で黄ばみクスミが綺麗に 1PV
ヘッドライトは経年劣化で黄ばんできてしまいます。特にここ10年くらいの車のヘッドライトはプラスチック製のヘッドライトカバーになってきています。昔のようにガラスではありませんので、より経年劣化が目立って…
もっと読む

エクストレイルT32おすすめバッテリーPanasonicカオスバッテリー 3PV
すべての車でバッテリーが搭載されています。特にアイドリングストップ車以降現在主流になりつつある電気自動車などではバッテリーの性能がとても重要になってきます。今回は日産エクストレイルT32においておすす…
もっと読む
TOYOTAキーレスリモコンの設定方法とキーナンバー（キー番号） 2PV
この度は（今回は？）、プラスチックの経年劣化により車のキーレスリモコンキーの送信機側（トランスミッター）のみをなくしてしまった場合です。（まだスマートキーやインテリジェンスキーと言われる前のキーレスリ…
もっと読む
ヘッドライトクリーニングにダイソーアルカリ電解水で黄ばみクスミが綺麗に 1PV
ヘッドライトは経年劣化で黄ばんできてしまいます。特にここ10年くらいの車のヘッドライトはプラスチック製のヘッドライトカバーになってきています。昔のようにガラスではありませんので、より経年劣化が目立って…
もっと読む

目次に行く･戻る

+本日の人気記事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 Stinger7 WordPress カスタマイズカスタマイズ伝えたいこと備忘録
WordPressアイキャッチ画像を自動で投稿記事に表示する方法
いまやブログにおいてアイキャッチ画像は無くてはならない存在になりつつあります。特にWordPressにおいては、基本的にアイキャッチ画像を設定することが出来るようになっているテーマがほとんどです。 …
もっと読む

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

: WordPress カスタマイズメンテナンス
Stinger6カスタマイズアドセンス広告設定備忘録
この度、これまではBloggerにてブログ運営をしてきて、カスタマイズもそれなりにして、アクセス数もまずまずとなっています。ですが、 WordPressにてデビューをしてみたいと思い、無料サ…
もっと読む

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

: WordPress
WordPressアップグレード、バージョンアップできない。
なぜなのかわかりませんが、 WordPressのバージョンアップ通知が来ているのですが、「今すぐ更新」を何度しても何回か展開しています。とはなるものの…。一向にアップグレード？バージョンアップが…
もっと読む

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

: php WordPress
PHPバージョン5.5に設定変更方法
WordPressで使われているphpというものがあります。これにもバージョンがあるらしく、現状私が利用させていただいているサーバーのバージョンは5.5ではなく5.2.17でした。そして、 Fa…
もっと読む

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

: AFFINGER4Pro WordPress カスタマイズ備忘録
AMP化したページでカエレバ・ヨメレバ・アプリーチを表示する方法
もうAMP化が騒がれて2年くらいになるのでしょうか・・・。それぞれのテーマによっては標準で対応しているものもありますね。ですが、対応していてもカエレバヨメレバのアフィリエイトコードの変換にはうまくでき…
もっと読む

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

: WordPress カスタマイズ伝えたいこと備忘録
プラグイン使わないAMP化対応方法完全版
先日公開させていただいた記事（：AMP化する方法プラグインなしで対応してみる）でWordPressにおいてプラグインを使用しないでなんとかAMP対応できないかなぁ。と思い試行錯誤中です。先日の状態で…
もっと読む

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

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

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

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

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

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

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

comment コメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

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

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

You may choose to prevent this website from aggregating and analyzing the actions you take here. Doing so will protect your privacy, but will also prevent the owner from learning from your actions and creating a better experience for you and other users.