スポンサーリンク

GoogleフォントなどのWebフォントを使ってみよう!

2019年7月13日ブログ

通常使用するフォントはパソコンやスマホにインストールされたものが使われます。
私たちがブラウザで表示される文字は使用している端末にインストールされているフォントで表示されているんです。

インストールされているフォントは端末によって違います。
パソコンなどの端末にインストールされているフォントをサイトで指定しても、見てくれるユーザーの端末にインストールされていなければ指定したフォントで表示されません。

結耶
結耶

可愛いフォントにしたいな~

「ブログ全体のフォントを変えたい」「ここのフォントを変えたい」と思うことがあります。
でも他の人が表示されないかもしれません。

そんな問題を解消できるのが『Webフォント』です。
Webフォントはサーバーから読み込むためどの端末で見ても表示されます。

今回は『Webフォントについて』書きたいと思います。

スポンサーリンク

Webフォントって?

Webフォントとは、サーバーに置かれたフォントデータを読み込みサイト上で表示できるものです。

通常、パソコンなどの各端末にインストールされているフォントを使用してブラウザで表示していますが、見ている側の端末に指定したフォントがインストールされていないと別のフォントが代用されます。

ですがWebフォントはサーバーに置かれたフォントデータを読み込むためどの端末でも指定したフォントが表示されます。

また通常のフォントと同じように色を変えたり、サイズを変えたりできます。

欧文フォントと日本語フォント

フォントはさまざまな言語のフォントがあります。
私たちがよく使うフォントは日本語フォントとABCのアルファベットの欧文フォントです。

日本語フォントは欧文フォントに読み込むのが遅いといわれてい。

《欧文フォント》
ABCabc
 
《日本語フォント》
あいうアイウ 阿
きらり

きらり

なんで『日本語フォント』は『欧文フォント』より読み込みが遅いの?
結耶

結耶

文字の種類が多いからだよ。アルファベットは大文字と小文字、日本語はひらがな、カタカナ、漢字と種類が多いから欧文フォントに比べて日本語フォントのが時間がかかるといわれてるんだよ!

とはいえ画像ではなくフォントなのでサイト全体ののフォントを変えたり、ワンポイントに使ったりできるので便利だと思います。

Webフォントサービス

Webフォントサービスはいくつかありますが、基本的に有料のところが多いです。
無料プランが用意されていても使えるフォントの数などの制限があります。

無料で使えるWebフォントサービスをいくつかご紹介します。

Googleフォント

Googleが提供しているWebフォントサービスです。フォントの種類も豊富で制限を気にすることなく無料で使うことができます。

TypeSquare

こちらは基本的に有料ですが、無料プランが用意されています。
日本語フォントが豊富で無料プランでも好きなフォントを選択できます。ただし、無料プランで使えるフォントは1つでPV数 1万/月 という制限があります。

Adobe Fonts Typekit

Adobeが提供しているWebフォントサービスです。
こちらも基本的に有料ですが、無料プランが用意されています。無料プランで使えるフォントの数は2つで、PV数2万/月 と制限があります。また無料プランで選択できるフォントの種類も制限されます。

PV数

『TypeSquare』と『Adobe Fonts Typekit』にはPV数の制限があります。

例えば、『Type Square』は月のPV数が1万回となっています。
これはType Squareのフォントの表示が1万プレビューという意味で、月のPV数1万を超えるとフォントデータが停止されフォントが表示されなくなります。0

きらり

きらり

えー!表示されなくなっちゃうの?
結耶

結耶

超えた時点でその月はフォントデータが停止されちゃうみたいだね。
といっても記事が表示されなくなる訳ではないよ。使うフォントは通常通り端末にインストールされたフォントが代用されるんだよ!

Googleフォントを使ってみよう

前述の通りGoogleフォントは制限を気にすることなく使えますので、Googleフォントの導入方法と使い方をご紹介します。

導入方法

Googleフォント

1.フォントの選択

Googleフォントを開いて使用するフォントを選択します。

使いたいフォントの右上にある「」をクリックするとフォントの選択ができます。
また、上の『Language』をクリックして「Japanese」を選択すると日本語フォントが表示されます。

2.スタイルの設定

使いたいフォントの選択をしたら画面下にある下の画像の右上の『』をクリックしてください。

クリックすると以下のような画面が表示されます。

上の『CUSTOMIZE』をクリックするとフォントごとのスタイルを設定できます。
フォントごとで設定できるスタイル(太字、車体など)は違いますが、使いたいスタイルがあればチェックを入れてください。

 注意!スタイルの設定が多いほど読み込みが遅くなる可能性がありますので必要最小限にしてください。
3.コードの挿入

スタイルの設定をしたら上の『EMBED』をクリックしてください。

赤枠部分をコピーして、自分のサイトの<HEAD>~</HEAD>間に挿入してください。

結耶

結耶

これで導入完了です。では次は実際に使ってみましょう。

Webフォントを使う

Webフォントを使うにはCSSで指定します。

先程のコードの下に選択したフォントの『font-family:フォント名;』の一覧が表示されています。

使いたいフォントの「font-family:フォント名」をコピーしてCSS指定してください。

これはサンプルです。
<span style="font-family: 'M PLUS 1p', sans-serif; font-size:24px; font-weight:700; ">これはサンプルです。</span>

きらり

きらり

これで使えるようになるんだ!思っていたより簡単だね。
結耶

結耶

そうだね。Googleフォントは制限を気にせず使えるからいいよね~(*^^*)

最後に

一部の箇所のフォントを変えるだけでもサイトがオシャレになります。

Googleフォント以外のWebフォントサービスの無料プランは制限がありますが、素敵なフォントがたくさんあります。
導入方法もそれほど難しくありません。

画像ではなく普通にフォントとしてサイトで使えるのでぜひ使ってみてください。

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人
結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター
きらり
きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

楽天ROOM