記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

【HTMLフォント】font-familyの指定+GoogleFonts導入方法

フォントの属性を調整することができる font-famliyについて解説。記述方法のほか、GoogleFontsを使うための知識についてもみていきます。

カテゴリ: HTML/CSS

こんにちは! 最近、WEB制作をはじめたけど「font-famliyってなに・・?」「font-famliyを指定できる様になりたい・・!」「GoogleFontsって聞いたことあるけど便利なの・・?」 そのように悩んでいる初心者WEB製作者の方も多いのではないでしょうか? font-famliyとは文字フォント(種類)を指定できる属性であり、wordなどでも文字のフォント(種類)を変えたことがあるのではないでしょうか? WEBにおいても文字の種類を変えることができます。
今回は、「font-famillyの基礎知識」「font-familyの指定方法」「font指定に便利なgooglefonts」を中心に解説していきます。

font-family

font-familyとは、文字の種類を指定するCSS属性です。 文字の種類を変え、WEBサイトを見やすくする為にfont-familyを変更します。

font-familyに指定する値

font-familyには主に「フォントファミリー名」「総称フォント名」の2点を指定する事ができます。 それぞれについて解説していきます。

○フォントファミリー名

フォントファミリー名とは、日本語フォント、欧文フォントの様に、具体的な名称の事です。 例として「メイリオ」「ヒラギノ角ゴシック」「Arial」「MS P明朝」「Meiryo」「MSゴシック」「Comic sans MS」などがあげられます。

○総称フォント名

総称フォント名とは、フォントの大きなカテゴリーの名称の事です。 今回は5種類「sans-serif」「serif」「monospace」「cursive」「fantasy」を紹介します。

  
総称フォント名 フォントの種類適用フォント例(フォントファミリー)
sans-serif ゴシック体フォント Arial、ヒラギノ角ゴシック、メイリオなど
serif 明朝対フォント ヒラギノ明朝、MS P明朝、Timesなど
monospace 等幅系フォント MS明朝、MSゴシック、Osaka-Monoなど
cursive 筆記体系フォント Comic Sans MSなど
fantasy 装飾系フォント Chick、albaなど

font-familyの基本的な記述方法

CSSで「font-family」を指定します、body要素に記載する事で、全体の文字フォントを統一する事ができます。

今回の例ではfont-familyに「MS Pゴッシク」というフォントを指定しました。 フォントファミリー名は、ダブルクォーテーションもしくはシングルクォーテーションで囲む事で使用することができます。
各見出し、段落にも適用することができます。

body要素全体にフォントの指定をしても、変更したい各見出し、段落に「font-family」を指定する事で、変更したい箇所だけを変更することが可能になります。

総称フォント名は最後に書く

総称フォント名は、font-familyの一番最後に記述します、またダブルクォーテーションなどでは囲わないルールとなっています。 上記例では、総称フォント名は、「sans-serif」です。

間に半角スペースの入るフォント名クォーテーションで挟む

間に半角スペースがあるフォントは、半角スペースを空けて、クォーテーションで挟み指定してください。半角スペース一つ違うだけでも表示する事ができません。

複数フォントを指定する

フォントを指定する際は、複数種類フォントを記載します。 理由は、各OS(windows、mac、iPhone/iPad)によって導入されているフォントが異なるため、windowsでは閲覧できても、macでは閲覧できないという現象が起こってしまうためです。 つまり、フォントというのは、「閲覧者の閲覧環境」に依存します。
「游ゴシックはwindows表示用のフォント」、「ヒラギノ角ゴ ProNはmacOS、iOS表示用のフォント」と別れているため、どのOSでも対応できる様に複数指定し、指定方法はカンマで区切り指定します。

前に書かれたフォントが優先される

font-familyを指定した場合は、前に記述してあるフォントから優先的にフォントが適用されます。閲覧者側に指定したフォントが入ってなければ、記述順に適用できるフォントを探していきます。 今回の例では、「メイリオ」「ヒラギノ明朝」「Osaka」の順番に適用されていきます。

欧文フォントを前に書く

英語部分を欧文フォント、日本語部分を日本語で指定したい場合は、欧文フォントを先に指定しましょう。 日本語フォントを先に指定してしまうと欧文フォントは指定されず、全て日本語フォントが指定されてしまいます。

Google Fonts

Google FontsとはGoogleが無料で提供する、フォントサービスで、Webサーバーから読み込み表示する事ができ、様々な言語に対応しています。

GoogleFonts使用方法

1.GoogleFontsにアクセス
2.利用したいフォントを選ぶ
3.コードをコピペして貼り付ける
上記3点が大まかな流れです。 それでは細かく見ていきましょう。

1.まずはGooglefontsにアクセスします。 https://fonts.google.com/

各項目の説明をします。
search フォント名から検索したい時に使用します。 フォント名がハッキリわかっている時は便利です。

Sentence 表示さてている文字の種類を変更する事ができます。 文字の種類を変更させる事により、GoogleFontsを利用し、どのような文字を表示したいのかの検討をつけることができます。

Categories フォントの書体を選ぶ事ができます。 serif: 明朝体の様な書体 Sans Serif:ゴシック体のような書体 Display:装飾文字 Handrwiting:手書き風 monspace:等幅フォント

Language 言語の中からフォントを絞り込む事ができます、日本語を含め29言語の中から選択する事ができます。

Font properties フォント詳細をさらに絞り込む事ができます。 Number of style: スタイルの数 Thickness:文字の太さ Slant:斜体の角度 Width:字幅の大きさ

2.利用したいフォントを選ぶ 利用したいフォントが決まったら、文字の太さなど利用したいフォントのスタイルを決め、フォントをクリックします。

3.コードをコピペして貼り付ける

linkから始まるタグをHTMLファイル内<head>〜</head>内に貼り付けます。

CSSのコードはCSSファイルに貼り付けます。

上記手順で指定した、GoogleFontを使用できるようになります。

○HTMLを変えずにフォントを読み込む方法

「@import」をクリックして→CSS内に貼り付けてください

【オススメ】Googlefont(日本語版)

日本語フォントは8種類提供されています。

○Noto Sans Jp

GoogleとAdobe社が共同開発した日本語フォント、フォントウェイトの種類は、6種類あります。 Noto Sans Jp

○Note Serif JP

明朝体形式で、フォントウェイトの種類は7種類 Note Serif JP

○MPLUS1p

漢字は直線、仮名は丸みのあるのが特徴、フォントウェイトは7種類 MPLUS1p

○MPULUSRoundede1c

MPLUS1pにさらに丸みがかかっている事が特徴、フォントウェイトは7種類 MPULUSRoundede1c

○Kosugi

新たに追加されたゴシック体、フォントウェイトは1種類 Kosugi

○KosugiMaru

丸ゴシック体、フォントウェイトは1種類 KosugiMaru

○sawarabi Gothic

フォントウェイトは1種類、漢字が十分に揃っていないので、メインの使用はオススメできない sawarabi Gothic

○sawarabi Minocho

上記同様、フォントウェイトは1種類、漢字が十分に揃っていないので、メインの使用はオススメできない sawarabi Minocho

まとめ

「font-famillyの基礎知識」「font-familyの指定方法」「font指定に便利なGoogleFonts」を中心に解説してきました。
最後にポイントをまとめます。
1.font-familyは主に「フォントファミリー名」「総称フォント名」の2点をCSSで指定する
2.font-familyはwebページ全体、見出し、各段落ごとに細かく指定する事ができる
3.フォントは複数指定する、理由は各OS(windows、mac、iPhone/iPad)によって  導入されているフォントが異なる為
4.font-familyは前に記述されたフォントが優先される
5.GoogleFontsとは、Googleが無料で提供する、フォントサービスで、Webサーバーから読み込み  表示する事ができるサービス
6.GoogleFonts使用方法は  ①Googlefontsにアクセス  ②利用したいフォントを選ぶ  ③コードをコピペして貼り付ける
いかがだったでしょうか?
WEBページ内の大半はテキスト情報です、font-familyを使いこなし、より良いWEB制作をしていきましょう。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。