現在の接続環境は
です

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

Windows10サポート終了まで
国民総株主
¥1,650 （2024/11/30 16:49時点 | Amazon調べ）
Amazon
楽天市場
Yahooショッピング
メルカリ

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

Stinger6 WordPress

GoogleFont

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

所要時間目安：約2分

This session is using　 IPv4 　is established in

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

カーメンテナンスWAKO'S

2024年12月9日 (月曜日)↓における週間月間人気記事トップ３は？↓

  • 本日
  • 週間
  • 月間
  1. つぶつぶ入りのスクラブ洗顔料

    マイクロプラスチック・マイクロビーズがつぶつぶ入り洗顔料や歯磨き粉に…。環境汚染も 98PV

    画像出典元：5 Gyres今年に入ってから、 インターネットニュースサイトやテレビのニュースなどでも報道されているマイクロプラスチック（もしくは、マイクロビーズ）というものがあります。このマイクロプラ…

    もっと読む

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

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

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

    もっと読む

  3. マイナ保険証なくても資格確認書で受診可能保険証は最長1年有効 24PV

    今年2024年12月2日に新規の紙のこれまでの保険証の発行を停止するとのことです。マイナンバーカードに保険証を登録してマイナ保険証としての利用を促しています。ですが、以下の記事のようにマイナ保険証はト…

    もっと読む

  1. マイナ保険証なくても資格確認書で受診可能保険証は最長1年有効 814PV

    今年2024年12月2日に新規の紙のこれまでの保険証の発行を停止するとのことです。マイナンバーカードに保険証を登録してマイナ保険証としての利用を促しています。ですが、以下の記事のようにマイナ保険証はト…

    もっと読む

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

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

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

    もっと読む

  3. カーナビテレビが見れなくなったICカードが正常に動作しませんでした

    ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 254PV

    本日ではなく昨日になってしまいますが、それまでカーナビで地デジ対応のナビで突然エンジンをかけなおしたら・・・・・・。 「ICカードが正常に動作しませんでした。販売店にお問い合わせください。」 なんてい…

    もっと読む

  1. マイナ保険証なくても資格確認書で受診可能保険証は最長1年有効 814PV

    今年2024年12月2日に新規の紙のこれまでの保険証の発行を停止するとのことです。マイナンバーカードに保険証を登録してマイナ保険証としての利用を促しています。ですが、以下の記事のようにマイナ保険証はト…

    もっと読む

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

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

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

    もっと読む

  3. カーナビテレビが見れなくなったICカードが正常に動作しませんでした

    ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 254PV

    本日ではなく昨日になってしまいますが、それまでカーナビで地デジ対応のナビで突然エンジンをかけなおしたら・・・・・・。 「ICカードが正常に動作しませんでした。販売店にお問い合わせください。」 なんてい…

    もっと読む

今日は2024年12月9日です。

目次に行く･戻る

2024年12月9日 (月曜日)本日の人気記事トップ１０

メルカリ招待コード：

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

クリスマスまであと…プレゼントは用意されましたか？

おすすめ！！

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

詳細ページへ

No.1シェアAmazon

おすすめ2

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

詳細ページへ

楽天市場

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

0

カウントダウンタイマー

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

🎉 Counting Up! 🎉
Loading...
ブログのデザイン夕日と夕焼けで考える

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

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

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

もっと読む

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

STINGER PLUS+デモ女の子アイキャッチ

WordPress テーマ 伝えたいこと 備忘録

WordPress無料テーマSTINGER PLUS+が早くもリリース

WordPressを使用し始めて５ヶ月弱…。初めは右往左往状態でテーマって何？みたいな状態からでした。そして、選ばせて頂いたのが有名どころの無料テーマStingerのその頃最新版だったStinger6…

もっと読む

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

RSSフィード画像

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

【決定版】プラグインなしでRSSにアイキャッチ画像を表示する2つの方法

この度は、度重なるRSSフィードにアイキャッチ画像を出力表示させる方法を連続して検証も兼ねて投稿してしまい申し訳ありませんでした。 何度か実際に実施してみてプラグインを使わないでRSSフィードにアイキ…

もっと読む

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

スマホファースト

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

スマホファースト用にStinger6Stinger7をカスタマイズ

WordPressはカスタマイズ性が優れているのは周知の事実だと思います。function.php内にしていする関数？などによっていろいろな事が出来るようになります。 また、テーマによってカスタマイズ…

もっと読む

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

AMP化プラグインを使用しないで成功

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

プラグイン使わないAMP化対応方法完全版

先日公開させていただいた記事（：AMP化する方法プラグインなしで対応してみる）でWordPressにおいてプラグインを使用しないでなんとかAMP対応できないかなぁ。と思い試行錯誤中です。 先日の状態で…

もっと読む

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

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

プラグインなしでカウントアップタイマーの設置方法

前回はプラグインを使わずにカウントダウンタイマーの設置方法を記載しました。ですが、カウントダウンタイマーがあるのならカウントアップタイマーもあるんじゃないのか。といことで、カウントアップタイマーの設置…

もっと読む

あなたが訪問してから

⏰ 0 秒経過 🎉

あなたが訪問してから

0 秒

おすすめの記事一部広告


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

Multiplex 広告

Total386


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

目次に戻る

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

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

-Stinger6, WordPress
-

目次に戻る

目次に戻る

コメントを閉じる

comment

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


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

あと5秒で記事が閲覧できます。

Protected by AFFINGER