- 更新日: 2019年8月6日
- 公開日: 2017年6月1日
【CSS初心者向け】font-familyを使ってフォント指定をする方法
CSSで文字の種類を指定するときのプロパティが、font-familyです。フォントを変えるだけで、パッと目を引く見出しを作れたり、Webサイト全体の印象も引き締めることができますよ。
今回は、だれでも簡単にフォントを変更できるように、font-familyの指定の仕方を詳しく解説します！
font-familyとは？
font-familyとは、CSSのプロパティ（設定項目）のひとつで、これを指定すると、フォント（文字）の種類を変更することができます。
構文
font-family: フォント名 ;
使用できるフォント名
こちらが、よく使われているフォントのリストです。変更する際に、参考にしてみてください。
| 総称ファミリー | フォント名 | サンプル |
|---|---|---|
| sans-serif (ゴシック系フォント） |
sans-serif | ABC123あいうえお愛 |
| arial | ABC123あいうえお愛 | |
| arial black | ABC123あいうえお愛 | |
| Impact | ABC123あいうえお愛 | |
| MS Sans Serif | ABC123あいうえお愛 | |
| serif （明朝系フォント) |
serif | ABC123あいうえお愛 |
| Century | ABC123あいうえお愛 | |
| MS Serif | ABC123あいうえお愛 | |
| Times New Roman | ABC123あいうえお愛 | |
| monospace (等幅フォント） |
monospace | ABC123あいうえお愛 |
| Courier | ABC123あいうえお愛 | |
| MS ゴシック | ABC123あいうえお愛 | |
| fantasy (装飾系フォント） |
fantasy | ABC123あいうえお愛 |
| Monotype Corsiva | ABC123あいうえお愛 | |
| cursive (筆記体フォント） |
cursive | ABC123あいうえお愛 |
| Comic Sans MS | ABC123あいうえお愛 | |
| 日本語フォント | MS UI Gothic | ABC123あいうえお愛 |
| MS Pゴシック | ABC123あいうえお愛 | |
| メイリオ | ABC123あいうえお愛 | |
| 游ゴシック/游ゴシック体 | ABC123あいうえお愛 | |
| ヒラギノ角ゴシック | ABC123あいうえお愛 | |
| ヒラギノ丸ゴ ProN | ABC123あいうえお愛 | |
| Droid Sans | ABC123あいうえお愛 |
指定したフォントがWebページを閲覧する人のPCやスマホに対応していないときは、意図しない表示になってしまうことがあります。
これを避けるために、font-familyには複数のフォントを指定し、ひとつはすべりどめのフォントを記載しておくことが推奨されています。すべりどめは「総称ファミリー」とよばれ、特定のフォントがなくても似たフォントのグループの中から自動的に表示してくれます。
font-familyを使う方法
フォントを指定する
基本のフォントの指定方法です。
/* CSSに記述します */
.sample1 {
font-size: 20px;
font-family: "serif";
}
<!-- HTMLに記述します -->
<div class="sample1"> ABC123あいうえお愛 </div>
結果
ABC123あいうえお愛
複数のフォントを指定する
複数のフォントを指定する時は、以下のルールがあります。
- 優先度の高いものから先に記述する
- フォント名とフォント名の間は、「,」（カンマ）で区切る
- フォント名にスペースが含まれる場合は、「'」（クォーテーション）か「"」（ダブルクォーテーション）で囲む
- 滑り止めの総称ファミリーを最後に記述する
/* CSSに記述します */
.sample2 {
font-size: 20px;
font-family: "YuGothic","Yu Gothic","Meiryo","ヒラギノ角ゴ","sans-serif";
}
<!-- HTMLに記述します -->
<div class="sample2"> ABC123あいうえお愛 </div>
結果
ABC123あいうえお愛
Webフォントを指定する
Webフォントとは、フォントをインターネットを参照して表示できるサービスです。作成者の思った通りの表示ができるメリットがあります。 しかし、外部にデータを読み込みにいくので重たくなる（表示が遅くなる）こともありますので、あまりたくさんの種類は使わない方がよいでしょう。
画像出典：Google Fonts
英語フォントはGoogle Fonts、日本語フォントはGoogle Fonts 日本語早期アクセスを使います。使いたいフォントを選ぶと、HTMLとCSSのコードを生成してくれます。今回は、「Ravi Prakash」「こころ明朝」というフォントを使ってみます。
<head>・・・・・</head>内に記述します
<link href="https://fonts.googleapis.com/css?family=Ravi+Prakash" rel="stylesheet">
<link href="https://fonts.googleapis.com/earlyaccess/kokoro.css" rel="stylesheet">
/* CSSに記述します */
.sample3 {
font-size: 30px;
font-family: "Ravi Prakash", cursive;
}
.sample4 {
font-size: 30px;
font-family: "Kokoro", cursive;
}
<!-- HTMLに記述します -->
<div class="sample3"> ABC123abc These are Web Fonts! </div>
<div class="sample4"> にほんごのうつくしいフォントですね </div>
結果
ABC123abc These are Web Fonts!
にほんごのうつくしいフォントですね
HTML上で指定する
スタイルシートに書いて試すのが手間な時、ちょっとだけ試したい時に、HTMLに直接書いて指定する方法もあります。(書き方としては、推奨されていません)こちらがサンプルです。
<font style="font-family: 'American Typewriter','Meiryo UI','ヒラギノ丸ゴ ProN','Hiragino Maru Gothic ProN',sans-serif;">あいうえおABCabc123</font>
結果
あいうえおABCabc123
Tips (ステップアップの小ワザ)
英語フォントを先に指定しよう
使いたい英語フォントがある時は、複数指定をする際に、英語用のフォントを先に日本語フォントを後に書きましょう。先に適用できる方が優先されてしまうからです。
/* CSSに記載 */
.a {
font-size: 20px;
font-family:'Cooper Black','fantasy','MS PGothic';
}
.b {
font-size: 20px;
font-family: 'Cooper Black','fantasy','MS PGothic';
}
<!-- HTMLに記載 -->
<div class="a">英語フォントを先に指定 ：ABC123あいうえお愛</div>
<div class="b">日本語フォントを先に指定：ABC123あいうえお愛</div>
結果
英語フォントを先に指定 ：ABC123あいうえお愛
日本語フォントを先に指定：ABC123あいうえお愛
面白い！アイコンフォントを使ってみよう
文章の頭や、ヘッダーにちょこんと使えるアイコンフォントというものがあります。今回使用したのはFont Awesomeというサービスです。Webフォントのように、インターネットから読み込んで使います。色々なアイコンがありますので、使ってみると面白いですよ！
<head>・・・・・</head>内に記述します
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
/* CSSに記述 */
.coffee:before {
font-family: FontAwesome;
content: '\f0f4';
color: #f88888;
font-size: 26px;
}
.bath:before {
font-family: FontAwesome;
content: '\f2cd';
color: #7cbdac;
font-size: 26px;
}
<!-- HTMLに記述 -->
<p>これは<span class="coffee">アイコン</span>フォントです<span class="bath"></span></p>
これはアイコンフォントです
フォント選びに困ったら Webサービスを使ってみよう
フォントが多すぎて選べないよ！という方向けに、フォントを選ぶWebサービスもありました。初心者向けのHTMLやCSSの詳細な記事が人気のサイト、サルワカにあります、Font-familyメーカー です。使いたいフォントを選んで、font-familyのCSSを作れますよ。
CodeCamp提供のデザインマスターコース
当メディアを運営しているCodeCampではデザインマスターコースを現役エンジニアのマンツーマンレッスンという形で提供しています。このコースの特徴は
- デザインからコーディングまでWebデザイナーに必要なスキルを獲得できる
- Webデザイナーとして転職・フリーランスも可能になる
- 実際にWebサイトを作るのでポートフォリオとしても使用できる
詳細はこちらから確認してみてください！▶︎https://codecamp.jp/courses/master_design
Tips (ステップアップの小ワザ)
ブラウザやOSで見た目が変わることを避けたいなどの意図から、2017年現在はWebフォントが流行しているようです。いろいろなサイトを閲覧する時に、フォントにも注目してみてみると楽しいですよ。
参考：
＼一流デザイナーのスキルが身に付く／
まとめ
- この記事を書いた人
- のりぴよ
