Loading…

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

Stinger6 WordPress

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

GoogleFont

所要時間目安:2

This session is using  IPv4  is established in

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

Stinger6 WordPress

目次に行く・戻る

メルカリ招待コード:

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

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

no image

php WordPress

PHPバージョン5.5に設定変更方法

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

もっと読む

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

AFFINGER5

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

AMP対応ショートコード(自作)をAFFINGER4で増やす方法

アイキャッチ画像:AFFINGER4公式HP(https://the-money.net/)のスクリーンショットです。 AFFINGER4では標準でAMP対応機能が備わっています。 そんな中で、自分で…

もっと読む

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

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

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

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

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

もっと読む

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

2匹のネコ

WordPress 伝えたいこと 備忘録

SEOに強いのはBloggerとWordPressどっちなのか

昨今、(というか結構前から)言われているSEOですが…。 そのSEOについて、 良く言われるのがWordPressが良いと言われています。 また、 GoogleのサービスであるBloggerというブロ…

もっと読む

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

アドセンス新コード遅延読み込みモバイルでページスピード最高値

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

AdSense(アドセンス)新コードの遅延読み込み2つの方法

Googleのサービスを利用されている方々は多いと思います。さまざまサービスがありますが、今回はグーグルアドセンス(Google AdSense)の新しいコードの遅延読み込みコードの2種類の方法につい…

もっと読む

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

記事上に人気記事表示

WordPress 備忘録

ブログを続ける意味と大切さ

約10年位前にブログ(ウェブログ:webのログ→通称ブログ)が流行り出しました。その頃から私は無料サービスのブログサイトでいくつかブログの運営をしてみました。 でも、 続いても1年もいかなかったように…

もっと読む

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

おすすめの記事一部広告

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

Multiplex 広告

おすすめ!!

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

おすすめ2

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

Total245


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

目次に戻る

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

-Stinger6, WordPress
-

目次に戻る

目次に戻る


コメントを閉じる

comment

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

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