「指定方法がよくわからず、いつもサンプルをコピペしている」こんな経験をされたことはないでしょうか?私がWebデザインを学習し始めた頃は、特に日本語のフォントに苦労しました。ページのコンセプトによもりますが、日本語のフォントがあっても種類が少なく、また、望むフォントは有料のものがほとんどでした。今は日本語の種類も増えました。google-fontで日本語の取り扱いが始まったことはWeb制作者にとっては嬉しいニュースでしょう。今回は、font-familyの使い方とその注意点を学習していきましょう。Fontsの使い方をマスターすることを目標としたいと思います。これは覚えれば難しい知識ではありませんので、ぜひマスターしてください。この記事は初学者向けに書いていますので、経験者は必要に応じて読み飛ばしてください。文字のフォントを指定する時に使うのがfont-familyというプロパティです。皆さんも、wordで文書を書く場合に、「ゴシック」や「ヒラギノ」などのフォント指定をするでしょう。公式な文書であれば「明朝体」を使ったり、親しいやすさを出すためにパンフレットには「うつくし体」など流線型の特殊フォントを使ったりしますね。同じように、webサイトも閲覧するユーザーにあったフォントを提供するべきです。そこで、用意されているのが、「font-family」というCSSプロパティです。書き方(指定方法)以下が書き方の基本です。フォントの種類の箇所には、一般的に複数のフォントの種類を書きます。いうのは、OSによって、見え方が異なるというが大きな理由です。Macで指定して、満足していたフォントが、お客様のWindowsの画面で見ると全く異なるイメージで伝わるということが実際に起こるのです。それを防ぐために、一般的にはフォントの種類は一つの記載にはならない、ということは覚えておいてください。複数指定さて、もう少し詳しく使い方を見ていきましょう。先ほど触れた複数指定ですが、イメージは以下のようです。ゴシック',sans-serif;かなりたくさんのフォントを設定しているという感覚を持った人も多いでしょう。書き方として、複数のフォント指定をする場合は、「’font-type’」をシングルクオーテーションで囲みます。それぞれの間は、「,」で区切ってください。先ほども触れたように、複数書く理由は、OSの違いに対応できるからです。ユーザーのPCに制作側で設定したフォントがインストールされていればいいのですが、そうではければ見れません。相手の環境と制作側の環境の違いを想定して書くために、複数にならざるをえないのです。「ゴシック体」では、Macとwindowsの差がなく表示されますが、「明朝体」では差が出る場面が出てきます。先頭のフォントから読み込まれて、それがなければ、次のフォントへと移ります。この仕組みを考えると、一つのフォントの種類だけを書くことは不安だということがわかると思います。日本語だけのサイトを制作するケースは限りなく少ないでしょう。殆どは、英語と日本語がミックスされたサイトです。従って、英語にも日本語にも対応できるフォント指定が求められます。英語フォントと日本語フォントの両方を指定する場合は、上記のサンプルのように先に英語フォントを指定し、次に、日本語を配置するのが流儀です。ProN」が指定されます。総称フォントファミリーここで、「総称フォントファミリー」というものを理解しておきましょう。これは、指定したフォントが相手のディバイスで表示されない時に表示されるフォントと考えてください。これは一般的に5種類あります。sans-serif(ゴシック体)serif(明朝体)monospace(等幅系フォント)fantasy(装飾系フォント)cursive(筆記体フォント)ですが、最初の2つの、ゴシック系と明朝系のどちらかを指定しておくと良いでしょう。見出しのフォントだけを変えるケースはありますが、ページのパーツごとにフォントの種類をわざわざ変える人はほとんどないでしょう。そこで、以下のように一括で指定しておく方が効果的です。次に、どのようなフォントがあるのかを見ていきましょう。この種類は非常に多いため、実際はそのサイトの目的にあったフォントを探す必要があるのですが、ここでは一般的なフォントをご紹介します。font-familyプロパティは、標準で次のフォントを用意しています。実際は以下のフォント以外にも複数の種類があります。ProN特に、日本語フォントはOSによっては見え方に差が出ます。Windows、Macなど、人によって使っているOSは異なりますので、それぞれに対応しておきたいものです。font」について説明しましょう。現在では、数は少ないですが、日本語にも対応していて使う機会もあるはずです。以下のリンクをクリックしてください。Fontページの右側に以下のような表示を見つけることができると思います。最初は種類で絞り込みを行います。等幅フォントあるいは、Trendingを押すと以下の表示が現れます。言語で選ぶ場合は、「Japanese」が選択できます。フォントのスタイルを選択も可能です。表示されるスタイルの数をさしています。右に動かせば表示される数が限定され、左に動かせば全て表示されます。左に動かせば文字の大きさが細くなり、右に動かせば文字の大きさが太くなります。これは文字の傾斜の度合いを選択できます。左に動かせば文字の傾斜が小さくなり、右に動かせば文字の傾斜が大きくなります。これは文字間の幅の大きさを選択できます。左に動かせば文字間の幅が小さくなり、右に動かせば幅が大きくなります。そのサンプルを様々なパターンで見ることができます。文字を入れてみてください。すると、以下の表示が表れます。一文表示がサンプルで表示されます。各ワードが表示されます。ここで、フォントのスタイルを試すことができます。「Custom」部分では、フォントを試してみることも可能です。文字の太さを試すこともできます。文字の大きさを試すこともできます。fontで使いたいフォントを決めたならば、右上のプラスマークをクリックしてください。すると、選んだフォントが下部に表示されます。それをクリックしてください。以下のような表示が表れます。次に、中のコードをHTMLとCSSに配置します。serif;}これで完了です。font-familyが効かない・見え方が違う原因font-familyを指定しても、なぜか効かない・・ということがあるかもしれません。上記で説明したように、まずは正しく指定できているかを確認してください。複数羅列した場合は、コンマ忘れなどありがちです。指定しても効かないことがあります。font-familyの使い方として注意したいのは、OS、ブラウザによって見え方が違うという点です。PCのchromeで指定していたフォントがiOSのsafariでは違うフォントになっている・・ということはあります。これは仕様の問題でもありますので、許容できるレベルなのかどうかを確認しながら作業する必要があります。指定したフォントが相手のブラウザでも見えるかどうかのOS、ブラウザ確認はしておいてください。ここはユーザーの環境に左右されるため、ある程度やれることが限られます。複数指定やブラウザによって差異が出ないフォントを使うなどの工夫は必要です。おすすめ記事【無料あり】本気でおすすめしたいプログラミングスクール3つ【実際に受講した】おすすめ記事IT業界に強い転職サイト・転職エージェントのオススメはココ!【比較ランキング】この記事が気に入ったらいいねしよう!最新記事をお届けします。陽介ベトナムで起業し、HR関連のコンサルティング業務をやっています。日本を離れて8年が経ちますが、日本ではあり得ないハプニングを楽しんでいます。RailsでWebサービスを作っています。