現在の接続環境は
です

記事内にプロモーションが含まれています。

プロモーションを含みます

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

Stinger6 WordPress

所要時間目安:2

This session is using  IPv4  is established in

今日は2025年5月15日です。

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

目次に行く・戻る

2025年5月15日 (木曜日)↓における週間月間人気記事トップ3は?↓

  • 本日
  • 週間
  • 月間
  1. 省電源のため自動的に電源をOFFにします 2PV

    車にはバッテリーからの電気が必須になっています。また、そのバッテリー自体をエンジン始動時にはオルタネーターにてアイドリングストップ車などほとんどすべての車は充電しています。エンジンのみかかっていて運行…

    もっと読む

  2. エンジンオイルシーリング剤Plus91

    エンジンオイル漏れ止めのおすすめはPlus91評価レビュー 2PV

    以前、オイル漏れ・オイル滲みが分かりエンジンオイルシーリング剤であるNUTECのOEM版でpitworkのNC81エンジンオイルシーリング剤を使用してみました。 ですが、一時オイル滲み・オイル漏れが止…

    もっと読む

  3. Windowsスポットライト画像

    Windowsスポットライト画像保存場所と方法 1PV

    Windows10においてロック画面の時に表示される画像がとてもきれいになりました。 この機能は、Windows10以前のバージョンの時には単なるロック画面でした。 そんな綺麗な画像が気になったので、…

    もっと読む

  1. エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 29PV

    車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…

    もっと読む

  2. キーレスリモコン破損

    車のキーナンバー確認方法。キーレス紛失や壊れた時 20PV

    初めての経験でした。(汗)…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。(汗)…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …

    もっと読む

  3. キッチンシンクからドブ臭い異臭原因解決方法

    キッチンシンク下がドブ臭い下水臭い原因と解決方法 19PV

    意外と知られていないのが、キッチンシンクからいつもと違う臭いや異臭や下水臭い強烈な匂いが出てくることがあります。いくらシンク内をカビキラーやキッチンハイターなどの塩素系漂白剤などできれいにしても・・・…

    もっと読む

  1. エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 29PV

    車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…

    もっと読む

  2. キーレスリモコン破損

    車のキーナンバー確認方法。キーレス紛失や壊れた時 20PV

    初めての経験でした。(汗)…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。(汗)…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …

    もっと読む

  3. キッチンシンクからドブ臭い異臭原因解決方法

    キッチンシンク下がドブ臭い下水臭い原因と解決方法 19PV

    意外と知られていないのが、キッチンシンクからいつもと違う臭いや異臭や下水臭い強烈な匂いが出てくることがあります。いくらシンク内をカビキラーやキッチンハイターなどの塩素系漂白剤などできれいにしても・・・…

    もっと読む

GoogleFontスクショ

 

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

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

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

 

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

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

これで、

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

 

この記事を読む方へのオススメ

メルカリ招待コード:

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

 

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

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

 

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

 

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

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

 

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フォントサービスが開設されている

引用元)

Windows10サポート終了まで

Multiplex 広告

あなたにおすすめな関連記事

WordPress カスタマイズ 伝えたいこと 備忘録

プラグイン使わずアイキャッチ画像自動生成しサイトのURLとカテゴリを自動的に追加する方法

以前にもアイキャッチ画像に関することは記載済みですが、アイキャッチ画像は作成したり著作権だったり肖像権だったりといろいろと面倒ですよね。最近では大手サイトでもアイキャッチ画像は芸能人などのスキャンダル…

もっと読む

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

RSSフィード画像

STINGER PLUS+ Stinger6 Stinger7 WordPress カスタマイズ 伝えたいこと 備忘録

RSSにアイキャッチ画像を出力する方法Stinger6、Stinger7、StingerPLUS+版

以前、RSSにアイキャッチ画像を出力する方法という記事を書きました。     普通の?RSSフィードに(PINGOOなど)にはアイキャッチがちゃんと表示されていました。 ですが、B…

もっと読む

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

ブログのデザイン夕日と夕焼けで考える

AFFINGER4Pro STINGER PLUS+ Stinger6 WordPress カスタマイズ 伝えたいこと 備忘録

ブログデザインがセンスの良いレイアウトやデザインにならない。Simple is Bestにしたい…。

人に見ていただくのでブログ運営においてデザインも重要です。自分の備忘録のみであれば、然程デザインやユーザビリティにこだわらなくても良いのかもしれません。テーマを変えてみようと思いましたが、これまでのカ…

もっと読む

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

AFFINGER5

AFFINGER4Pro Stinger6 WordPress カスタマイズ 伝えたいこと 備忘録

テーマ変更の楽な方法はない!?

アイキャッチ画像:AFFINGER4公式HP(https://the-money.net/)のスクリーンショットです。 この度、昨今ちまたでものすごく有名なWordPressのテーマAFFINGER4…

もっと読む

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

AMP画像

SNS WordPress インターネット カスタマイズ 伝えたいこと 備忘録

AMP化する方法プラグインなしで対応してみる

今年の初め頃にGoogleがスマホやモバイルユーザーに特化したサイト表示ができるようになるAMPというものを発表しました。 その後もHTTPS everywhere(SSL化)などもありますが…。 は…

もっと読む

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

WordPress カスタマイズ カスタマイズ セキュリティ 伝えたいこと 備忘録

プラグイン使わずにアイキャッチ画像を自動生成・設定する方法

アイキャッチ画像とは何かということはわかると思いますので特に説明しませんが、ブログなどの記事に対するアイキャッチ画像を設定し忘れてしまったり、アイキャッチ画像を作ったり、アイキャッチ画像を設定し忘れて…

もっと読む

【AmazonタイムセールSALE車&バイク】!


人気の商品が日替わりで登場。毎日お得なタイムセール「Amazonタイムセール全体」

出展:Amazonタイムセール

人気の商品が日替わりで登場。毎日お得なタイムセール

\楽天ポイント4倍セール!/
楽天市場
\ポイント5%還元!/
Yahooショッピング

あなたが訪問してから

0 秒経過 🎉

入学入社まであと…入学入社祝いはどんなPresent(プレゼント)でどのように過ごされますか?

ホワイトデープレゼントは以下などの豊富なキャンペーン商品から選ぶと良いと思います。

ブログサービスが始まってから:


カウントダウンタイマー

おすすめの記事一部広告

Total603


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

目次に戻る

よろしかったらシェアよろしくお願いします。

-Stinger6, WordPress
-

目次に戻る

目次に戻る


コメントを閉じる

comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です


This site uses Akismet to reduce spam. Learn how your comment data is processed.