GoogleフォントなどのWebフォントを使ってみよう!
通常使用するフォントはパソコンやスマホにインストールされたものが使われます。
私たちがブラウザで表示される文字は使用している端末にインストールされているフォントで表示されているんです。
インストールされているフォントは端末によって違います。
パソコンなどの端末にインストールされているフォントをサイトで指定しても、見てくれるユーザーの端末にインストールされていなければ指定したフォントで表示されません。
可愛いフォントにしたいな~
「ブログ全体のフォントを変えたい」「ここのフォントを変えたい」と思うことがあります。
でも他の人が表示されないかもしれません。
そんな問題を解消できるのが『Webフォント』です。
Webフォントはサーバーから読み込むためどの端末で見ても表示されます。
今回は『Webフォントについて』書きたいと思います。
Webフォントって?
Webフォントとは、サーバーに置かれたフォントデータを読み込みサイト上で表示できるものです。
通常、パソコンなどの各端末にインストールされているフォントを使用してブラウザで表示していますが、見ている側の端末に指定したフォントがインストールされていないと別のフォントが代用されます。
ですがWebフォントはサーバーに置かれたフォントデータを読み込むためどの端末でも指定したフォントが表示されます。
また通常のフォントと同じように色を変えたり、サイズを変えたりできます。
欧文フォントと日本語フォント
フォントはさまざまな言語のフォントがあります。
私たちがよく使うフォントは日本語フォントとABCのアルファベットの欧文フォントです。
日本語フォントは欧文フォントに読み込むのが遅いといわれてい。
ABCabc
《日本語フォント》
あいうアイウ 阿
とはいえ画像ではなくフォントなのでサイト全体ののフォントを変えたり、ワンポイントに使ったりできるので便利だと思います。
Webフォントサービス
Webフォントサービスはいくつかありますが、基本的に有料のところが多いです。
無料プランが用意されていても使えるフォントの数などの制限があります。
無料で使えるWebフォントサービスをいくつかご紹介します。
Googleが提供しているWebフォントサービスです。フォントの種類も豊富で制限を気にすることなく無料で使うことができます。
こちらは基本的に有料ですが、無料プランが用意されています。
日本語フォントが豊富で無料プランでも好きなフォントを選択できます。ただし、無料プランで使えるフォントは1つでPV数 1万/月 という制限があります。
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フォントを開いて使用するフォントを選択します。
使いたいフォントの右上にある「」をクリックするとフォントの選択ができます。
また、上の『Language』をクリックして「Japanese」を選択すると日本語フォントが表示されます。
使いたいフォントの選択をしたら画面下にある下の画像の右上の『』をクリックしてください。
クリックすると以下のような画面が表示されます。
上の『CUSTOMIZE』をクリックするとフォントごとのスタイルを設定できます。
フォントごとで設定できるスタイル(太字、車体など)は違いますが、使いたいスタイルがあればチェックを入れてください。
スタイルの設定をしたら上の『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フォント以外のWebフォントサービスの無料プランは制限がありますが、素敵なフォントがたくさんあります。
導入方法もそれほど難しくありません。
画像ではなく普通にフォントとしてサイトで使えるのでぜひ使ってみてください。
ディスカッション
コメント一覧
こんばんは。
webフォントはいろいろありますね。
Googleフォントが一番良いような気がしました。
制限を気にしなくていいというのはやはり魅力です。
数年後に有料になる、ということもあるかもしれませんが、
それまでは使えますね。
> takafumiさん
こんばんは。
いつもコメントありがとうございます。
Webフォントサービスはいくつか見ましたが、Googleフォント以外は基本的に有料のところばかりで(^^;
無料プランは『制限』がありますね。
Googleフォントは今のところ無料でいろいろな使えるので今のうちに思う存分使いますw
有料になったら…その時考えます(*^^*)
こんにちは、ランキングから来ました。
Webフォント良いですね。
フォントの使い方次第でブログの印象が変わりますよね。
> こばみちさん
こんにちは。
コメントありがとうございます。
フォントの使い方でブログがオシャレになったりしますね(*^^*)
上手にWebフォントを使ってオシャレなサイトを作りたいですね。
こんにちは!
ブログランキングからきました。
フォントでブログの印象って変わりますよね。
ぜひ使ってみたいと思います。
情報ありがとうございます。
> ユートピアさん
こんばんは。
コメントありがとうございます。
はい。部分的にフォントを変えるだけでも印象は変わると思います。
基本的にはフォントは見ている人の端末によって変わりますが、Webフォントはどの端末で見ても見られるのでいいですよね(*^^*)
はじめまして
ランキングから来ました。
Webフォント良いですね!
ぜひ使ってみようと思います
参考になりました。
ありがとうございます。
> isosiさん
こんばんは。
コメントありがとうございます。
ワンポイントでフォントを変えるだけでも雰囲気が変わりますよね。
端末にによってフォントが変わり「あれ?」と思うこともなくなるのでいいと思います。
導入方法も簡単ですのでぜひ使ってみてください。