現在の接続環境は
です

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

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

Stinger6 WordPress

GoogleFont

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

所要時間目安：約2分

This session is using　 IPv4 　is established in

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

目次に行く･戻る

2025年4月1日 (火曜日)本日の人気記事トップ１０

2025年4月1日 (火曜日)↓における週間月間人気記事トップ３は？↓

  • 本日
  • 週間
  • 月間
  1. 間違いメールと迷惑メールとフィッシング詐欺メール判断方法

    コンタクトフォーム 1PV

    お問い合わせは以下よりお願いします。 お問い合わせメールフォーム お問い合わせメールフォーム お問い合わせ IPアドレスは上記ページ訪問にて記録されます。 もしくは以下よりお願いします。 お問い合わせ…

    もっと読む

  2. 2025年4月1日から「車庫証明ステッカー」廃止、交付手続きは従来通り 1PV

    これまで1991年に導入された車庫証明の車の貼り付ける車庫証明ステッカーシールは廃止されます。車のナンバーから車庫証明の有無が確認できるようになったためのようです。ただし、新車購入時や中古車購入時など…

    もっと読む

  3. プラリシート補修前ステアリングエクストレイルV字部分全体

    車の内装インパネ破損修理にプラリペアとプラリシートがおすすめ 1PV

    車の内装インパネやあバンパーなどFRP樹脂やABS樹脂などのプラスチック製品の破損時に簡単に接着剤よりも強力にくっつく補修剤があることを知りませんでした。よく内装のインパネなどを剥がして配線処理などを…

    もっと読む

  1. エンジンスターターリモコン

    カーメイトのエンジンスターターでエラー15表示と対処方法 34PV

    夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…

    もっと読む

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

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

    もっと読む

  3. アイドリングストップシステム異常警告灯表示対処方法 19PV

    2010年前後以降の車に搭載されていることの多いアイドリングストップシステム。各自動車メーカーによって呼び名は異なりますが、機能としては信号待ちが長い時や停止時間が長い時などに勝手に（自動的に）アイド…

    もっと読む

  1. 間違いメールと迷惑メールとフィッシング詐欺メール判断方法

    コンタクトフォーム 1PV

    お問い合わせは以下よりお願いします。 お問い合わせメールフォーム お問い合わせメールフォーム お問い合わせ IPアドレスは上記ページ訪問にて記録されます。 もしくは以下よりお願いします。 お問い合わせ…

    もっと読む

  2. 2025年4月1日から「車庫証明ステッカー」廃止、交付手続きは従来通り 1PV

    これまで1991年に導入された車庫証明の車の貼り付ける車庫証明ステッカーシールは廃止されます。車のナンバーから車庫証明の有無が確認できるようになったためのようです。ただし、新車購入時や中古車購入時など…

    もっと読む

  3. プラリシート補修前ステアリングエクストレイルV字部分全体

    車の内装インパネ破損修理にプラリペアとプラリシートがおすすめ 1PV

    車の内装インパネやあバンパーなどFRP樹脂やABS樹脂などのプラスチック製品の破損時に簡単に接着剤よりも強力にくっつく補修剤があることを知りませんでした。よく内装のインパネなどを剥がして配線処理などを…

    もっと読む

カーメンテナンスWAKO'S

今日は2025年4月1日です。

メルカリ招待コード：

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

引用元）

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

【AmazonスマイルSALE】！


3/28(金)9時から4月1日（火）23時59分まで、「AmazonスマイルSALE」開催予定

3月28日(金曜日) ～ 2025年4月1日(火曜日) 23:59まで

Windows10サポート終了まで

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

Stinger7

Stinger6 Stinger7 WordPress テーマ

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

 先月下旬にWordPressのテーマで人気シリーズのStingerがStinger7を公開されていたので、 テーマを変更しようかどうしようか悩んでいました。https://infovari…

もっと読む

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

2匹のネコ

AdSense php WordPress カスタマイズ テーマ

Stinger6カスタマイズ?スマホ表示がオカシイので変更と削除した部分

ここ10日間くらいwordpressの勉強に励んでいるところです。 テーマは、 調べた所一番評判が良いStingerというものにしました。 バージョンは6です。 Stinger5も一応ダウンロードはさ…

もっと読む

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

AFFINGER5

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

テーマ変更の楽な方法はない！？

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

もっと読む

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

WordPress 不具合 伝えたいこと

Important notice for administrators

先月にWordPressのプラグインで有名な人気記事などを表示することが簡単にできるWordPress Popular Postsにて、以下のようなエラーメッセージが表示されるようになりました。 エラ…

もっと読む

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

AFFINGER5

WordPress カスタマイズ テーマ 備忘録

AFFINGER5でプラグインなしで機能制限なくクレジット削除方法

WordPressで人気なテーマのひとつにAFFINGER5があります。その他にもCocoonなども無料テーマであります。AFFINGER5においてはフッター部分にPoweredByAFFINGER5…

もっと読む

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

Pixlrオンライン画像編集サイトにて作成

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

ページ表示速度が遅いのでphotonが使いたくてJetpackプラグインをインストールしてみた…。

ここのところ、サイト（ブログ）のページ表示速度が気になってしまいます。以前に運営していたBloggerブログでも同様のことを考えたりしていました。ですが、サイトのページ表示速度が少しくらい遅くても時代…

もっと読む

あなたが訪問してから

⏰ 0 秒経過 🎉

「Stinger6, WordPress」の人気記事

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

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

おすすめ！！

世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう！！ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ！！

詳細ページへ

No.1シェアAmazon

おすすめ2

楽天による季節特集です。それぞれの季節ごとにお得なお買い物商品やお得な旅行商品、その他にもAmazon同様に国内最大の買い物ポータルサイトです。楽天をメインにお買い物されている方はポイントやSPUも貯まりさらにお得に！！楽天カードや宇佐美系列のガソリンスタンドでも楽天ポイントが今では貯まります。それらのポイントを貯めてお得にお買い物や旅行商品その他にもパソコンサプライや車カスタマイズ商品など楽天も充実しています。

詳細ページへ

楽天市場

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


カウントダウンタイマー

おすすめの記事一部広告


お小遣い稼ぎにアンケート。

Multiplex 広告

Total544


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

目次に戻る

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

この記事タイトルとURLをコピー

-Stinger6, WordPress
-

目次に戻る

目次に戻る

コメントを閉じる

comment

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


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