【CSS初心者向け】font-familyを使ってフォント指定をする方法



【CSS初心者向け】font-familyを使ってフォント指定をする方法

CSSで文字の種類を指定するときのプロパティが、font-familyです。フォントを変えるだけで、パッと目を引く見出しを作れたり、Webサイト全体の印象も引き締めることができますよ。

今回は、だれでも簡単にフォントを変更できるように、font-familyの指定の仕方を詳しく解説します!

image

目次
  1. font-familyとは?
  2. 構文
  3. 使用できるフォント名
  4. font-familyを使う方法
  5. フォントを指定する
  6. 複数のフォントを指定する
  7. Webフォントを指定する
  8. HTML上で指定する
  9. Tips (ステップアップの小ワザ)
  10. 英語フォントを先に指定しよう
  11. 面白い!アイコンフォントを使ってみよう
  12. フォント選びに困ったら Webサービスを使ってみよう
  13. まとめ

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フォントとは、フォントをインターネットを参照して表示できるサービスです。作成者の思った通りの表示ができるメリットがあります。 しかし、外部にデータを読み込みにいくので重たくなる(表示が遅くなる)こともありますので、あまりたくさんの種類は使わない方がよいでしょう。

image

画像出典: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を作れますよ。

image

画像出典:Font-familyメーカー byサルワカ

CodeCamp提供のデザインマスターコース

当メディアを運営しているCodeCampではデザインマスターコースを現役エンジニアのマンツーマンレッスンという形で提供しています。このコースの特徴は

  • デザインからコーディングまでWebデザイナーに必要なスキルを獲得できる
  • Webデザイナーとして転職・フリーランスも可能になる
  • 実際にWebサイトを作るのでポートフォリオとしても使用できる

詳細はこちらから確認してみてください!▶︎https://codecamp.jp/courses/master_design

 

まとめ

image ブラウザやOSで見た目が変わることを避けたいなどの意図から、2017年現在はWebフォントが流行しているようです。いろいろなサイトを閲覧する時に、フォントにも注目してみてみると楽しいですよ。

参考:

Mozilla Foundation

W3G

image

のりぴよ
この記事を書いた人
のりぴよ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp