Google Fontsの使い方【2018年版】

2月もあっという間に折り返してしまい、え?え?うそ。。。となっているカテリーナです! Buongiorno!

今日は以前、読者さんのシノハラさんより質問を受けていた「グーグルフォントの使い方」についてザザーっと解説してみたいと思います。

上の無意味なスライド画像なんですが、なんとなくそこにいてもらいたいので動作が重くなろうが入れさせてもらいます。すみません!

1.使いたいフォントを決める

とりあえず説明するのが面倒くさいので、シノハラさんは、HTMLやCSS、Google Fontsが何であるかはご存じである!という前提で始めたいと思います。ええ。

 

まずはGoogle Fontsに飛び、どのフォントを使うか決めます。 何せ800種類以上のフォントがひしめき合っていますので、これだけあると「どれをつっかおうかな~♪」とか迷うかと思いきや、自分の気に入っているフォントを毎回使ってしまうという馬鹿の一つ覚え状態。。。 2018年はもう少し冒険したいと思います。

今回シノハラさんにはわたしの馬鹿の一つ覚え状態の「Montserrat」と「Lobster」の2つのフォントを使っていただきましょうか(笑)。

こんな感じで選びます。

Google Fontsを選ぶ

 

この要領で「Lobster」フォントも選んじゃいましょう。

その後、こういう画面を出します。

選んだフォント

選んだ2つのフォントが並んで見えますね?

 

ここで、次の段階に進みます。

2.Google FontsのAPIをHTMLに埋め込む

Google Fonts API

字が小さくて少し見にくいので、下に大きく書いておきます。

<link href=”https://fonts.googleapis.com/css?family=Lobster|Montserrat” rel=”stylesheet”>

これをHTMLコードのHEADタグの中に下のように入れます。

<!DOCTYPE html>
<html>

<head>
 <meta charset=”utf-8″>
 <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> 
 <meta name=”viewport” content=”width=device-width, initial-scale=1″>
 <meta name=”author” content=””>
<title>Sample</title>
<link rel=”stylesheet” href=”style.css”> //ここに自分のCSSファイルを入れる
<link href=”https://fonts.googleapis.com/css?family=Lobster|Montserrat” rel=”stylesheet”> //ここにGoogle Fonts APIを入れる
</head>

<body>

</body>
</html>

 

 

カテリーナがCDNやAPIを入れる時の順番はだいたい

1.BootstrapのCDN
2.自分のCSSファイル
3.Google FontsのAPI
4.Font AwesomeのCDN

みたいな感じで決めています。

3.@importを使う

@import

<style>
@import url(‘https://fonts.googleapis.com/css?family=Lobster|Montserrat‘);
</style>

このコードをHTMLのHEAD内に入れ込んでも良いんですけど、カテリーナは紫の部分だけをご自分のCSSファイルの一番上に埋め込む方式をおすすめします

 

というのは、作っているWebサイトが何ページにも渡るような場合、そのHTMLファイル1つ1つにstyleタグでスタイリングしていると、何か修正がある場合にとんでもない労力がかかるからです。 

エネルギーと時間をいかに節約してズボラしてやろうかと常に考えているカテリーナにとってそういうのはもうあり得ないムダなんですね。

ご自分のCSS内では、こんな感じでフォントファミリーを指定します。

@import url(‘https://fonts.googleapis.com/css?family=Lobster|Montserrat‘);

body {
   font-family: ‘Lobster’, ‘Montserrat’, ‘メイリオ’, ‘ヒラギノ角ゴシック’,  san-serif;

}

尚、Google FontsのAPIをHTMLに入れ込んだ場合は、一番上の@importなんとかは必要ありませんが、フォントファミリーの指定方法は上のやり方と全く同じです。

まとめ:フォントファミリーを指定する時に注意すること

今回は、Google Fontsを設定してフォントファミリーを指定する方法をご紹介しました。 ※シノハラさん、もし分からないことがあったらまた遠慮なく質問してください。

第3の方法としてGoogle Fontsをご自分のコンピューターにダウンロードするというのもあるんですが、これは全くオススメしません。

あ、カテリーナはフォントを集めているのでその目的でダウンロードしまくってますけどね(笑)。

Google Fontsには日本語フォントもあるっちゃああるんですが、個人的には全然オススメしないですね。

ほら、日本語ってひらがなカタカナ漢字で成り立ってるんで、フォントファイルのサイズが異常に大きいんです。だから日本語フォントをGoogle Fontsで指定したりすると、ページの読み込みに時間がかかる ⇒ イライラしたお客さんはあなたのページから早々に退散みたいな有様になるんですね。 だからコンピューターにデフォルトで内蔵されている日本語フォントを指定するようにしましょう。

 

 

最後にフォントを指定する際にとっても大事な点をお伝えしたいと思います。

 

  • 欧文フォント名は絶対大文字で始める
  • 各フォント名は’フォント名’みたいな感じでクオテーションマークで必ず囲む
  • 各フォントの区切りはコンマ。コンマは絶対に忘れてはいけない
  • 最後のセミコロンも絶対に忘れてはいけない
  • 繰り返しますが、日本語フォントはコンピューター内蔵のものを指定する

 

小文字で始めたり、コンマ忘れ、セミコロン忘れ、フォント名のスペリングが違う、こういうくだらないミスで、コンピューター様はこっちが思っているようなフォントは一切表示してくれなくなります!そして何で表示されないんだろう????と4時間ぐらい悩むはめになります(笑)。

 

最近のマイブームは、OswaldとPlayfair Displayというフォントです。思いっきりどうでもいい情報でしたね(爆

というわけで今回はここまで! いつも読んでいただいてありがとうございます!

One thought on “Google Fontsの使い方【2018年版】

  1. グーグルアドセンスの広告めちゃめちゃ目障りだから、このページから消したいのに消せない!!!困る!

Leave a Reply

Your email address will not be published.

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