この記事では、フォントを指定するためのCSSプロパティ「font-family」の書き方について一から詳しく解説します。font-familyを設定したことが無い方でも、正しくフォントが指定できるように、プロパティの書き方から、OSごとの設定の違い、おすすめのフォント設定例などもご紹介します。
「font-familyはいつもコピペしている…」なんて方も、正しい知識が有るか無いかは大きな違いです。ぜひこの機会に、font-familyの正しい設定方法をマスターしてください。
※本記事は、各OSの標準インストールフォントや、ブラウザのアップデート状況などを踏まえて、なるべく最新の情報をお届けできるように、内容を随時更新しています。著者の調査した情報に基づいて執筆しているため、内容に間違いや不備のある可能性もあります。(最終調査日:2023年7月)
【目次】
CSSのfont-familyプロパティは、WebサイトやHTMLメールのフォントを指定するために使用されます。コンテンツの大半はテキスト情報であるため、指定したフォントによって、文章の可読性や視認性に大きな影響を与えます。そのため、意図したフォントで表示されるように、font-familyを正しく指定する必要があります。
しかしながら、実際にユーザーの端末に表示されるフォントはユーザー側の閲覧環境に依存します。font-familyを正しく指定しても、そのフォントがユーザーのパソコンやスマートフォンに入っていなければ、意図したフォントでは表示されず、代替フォントで表示されることになります。
font-familyは、あらゆる閲覧環境を想定し、できるだけ多くの環境に対応したフォントを指定しておく必要があります。
次章からは、具体的なfont-familyの指定方法について解説していきます。CSSによる記述例も多く登場しますので、CSSの基本をまだマスターしていない方は、以下の記事も読んでみてください。
基本的にフォントは、WebサイトやHTMLメール全体に対して一括指定をします。一般的にはbodyタグに対してCSSでフォントを指定します。
/* サイト全体のフォント指定 */ body { font-family: "MS Pゴシック" ; }
デザインによっては、見出しやメニュー部分のフォントだけを変更したい場合があります。そういった場合には、該当するタグに対してCSSでフォントを指定します。
/* h1見出しのフォント指定 */ h1 { font-family: "メイリオ" ; } /* ナビゲーションメニューのフォント指定 */ nav ul li { font-family: "メイリオ" ; }
font-familyプロパティには、「フォントファミリー名」か、「総称フォント名」のいづれかを指定します。
「Arial」や「メイリオ」など、欧文フォントや日本語フォントの具体的な名称のことフォントファミリー名と呼びます。
body { font-family: "Arial", "メイリオ"; }
font-familyに指定するフォントファミリー名は、【正式な固有名称】で指定する必要があります。同じフォント名でもOSによって固有名称の表記が異なったり、半角・全角・スペース位置などが間違っていても正しく機能しません。
代表的なフォントの固有名称表記については、記事の後半で詳しくご紹介しています。
ゴシック体や明朝体のように、フォントの大きなカテゴリーのことを「総称フォント」と呼びます。font-familyに指定できる代表的な総称フォント名は、以下の6つです。
総称フォント名 | フォントカテゴリー | 適用フォント例 |
---|---|---|
sans-serif | ゴシック体 | メイリオ、ヒラギノ角ゴシック、Arial |
serif | 明朝体 | MS P明朝、ヒラギノ明朝、Times |
system-ui | OSのUIと同じフォント | Yu Gothic UI、Meiryo、ヒラギノ角ゴシック、San Francisco |
monospace | 等幅フォント | MSゴシック、MS明朝、Osaka-Mono |
cursive | 筆記体 | Comic Sans MS、Scriptなど |
fantasy | 装飾系フォント | alba、Chickなど |
body { font-family: sans-serif; }
総称フォントを指定した場合は、通常はOSやブラウザごとにデフォルト設定されたフォントが自動的に適用されます。
一般的に、総称フォントには、sans-serif(ゴシック体)か、serif(明朝体)のいづれかを指定しておきます。cursive(筆記体)、fantasy(装飾文字)については、実際には具体的なフォントが割り当てられず、ゴシック体や明朝体で表示されるため実用的ではありません。
font-familyプロパティの基本書式と注意点について解説します。
フォントファミリー名は、日本語フォント・欧文フォント、またフォント名にスペースを含む・含まずを問わず、ダブルクォーテーション(”)、またはシングルクォーテーション(’)の引用符で囲うことが推奨されています。
最新の各ブラウザでは引用符で囲わなくとも実際には機能します。しかし、フォントファミリー名と総称フォント名との区別をする目的と、フォント名の区切りをわかりやすくするためにも引用符で囲っておくというルールに決めておく方が良いでしょう。
一方で、総称フォント名は引用符では囲わないようにしてください。もし引用符で囲ってしまうと、ブラウザがフォントファミリー名として認識してしまい、総称フォント名として正しく機能しない場合があります。
フォントファミリー名は複数指定が可能です。各フォントファミリー名をカンマ(,)で区切って記述します。カンマの後のスペースは空けても空けなくてもどちらでも構いません。
※フォントファミリー名に、日本語名(例:メイリオ)と英語名(例:Meiryo)の両方を指定する必要はありません。最新の主要ブラウザは、どちらかを指定しておけば問題なく表示されます。両方表記するという方法は、過去に日本語名のフォントを認識しないブラウザがあった名残です。
font-familyに複数のフォントを指定した場合、前に書いたフォントから優先的に適用されます。もしユーザーの端末に、指定したフォントが入っていなければ、次のフォント、また次のフォント…という順番で、ブラウザはフォントを探していきます。
ここからは、フォントを指定する際に必ず抑えておくべきポイントをご紹介します。意図したフォントを表示するための重要なポイントになりますので、しっかり覚えておきましょう。
Windows、macOS、iOS(iPhone、iPad)などのOSは、それぞれ標準インストールフォント(初めから入っているフォント)が異なります。そのため、font-familyには、各OS表示用に複数のフォント名を指定しておくことが推奨されています。
Android対応について 「Androidの表示用フォントは?」と思った方もいると思いますが、現状Android表示用のfont-familyは設定する必要はないと思います。理由は、OSのバージョン、メーカー、機種などによってインストールされている日本語フォントが異なるため、全てのAndroid環境をカバーするには設定が複雑になり過ぎるからです。 Android表示用のフォントは何も指定せず、それぞれの端末のシステムフォント(デフォルト表示フォント)で表示させる対応で問題ないでしょう。 Androidのシステムフォントは、日本語フォントはAndroid 6.0以降「Noto Sans CJK」、欧文フォントは、Android 4.0以降「Roboto」が使用されています。それ以前は、日本語フォントは「モトヤフォント」、欧文フォントは「Droid」が使用されていました。 |
指定したフォントが全て表示されなかった場合の対策として、値の最後に総称フォント(ゴシック体や明朝体)を指定しておきます。
例えば、以下のフォント指定例をご覧ください。
body { font-family:"MS Pゴシック",sans-serif; }
MS Pゴシックと、総称フォント(sans-serif)のみが指定されています。この場合、Windowsは、MS Pゴシックが適用されます。macOSとiOSには、MS Pゴシックは標準インストールされていないので、sans-serifが適用され、ゴシック体フォントが適用されます。
font-familyが無指定だった場合の注意点 もしfont-familyに何も指定しなかった場合は、OS・ブラウザごとのデフォルトフォントが適用されます。 大半のブラウザのデフォルトフォントは、ゴシック体ですが、macOSとiOS(iPhone、iPad)の標準ブラウザSafariだけはデフォルトフォントが明朝体になっています。(2022年7月時点調べ) ゴシック体と明朝体では、Webサイトの印象は大きく違って来ますので、最低限、総称フォントは指定しておく必要があります。 また、今後のOSやブラウザのバージョンアップによって、標準インストールフォントや、デフォルトフォントが変更になる可能性もあります。 |
以下の例のように、英語部分(半角英数字)に欧文フォント、日本語部分は日本語フォントを指定したい場合があると思います。
この場合のfont-familyの指定方法は、欧文フォント名を日本語フォント名よりも先に指定することで実現できます。
日本語フォント名を欧文フォント名より先に指定してしまうと、すべてのテキストが日本語フォントで表示されてしまいますので注意してください。
すべてのテキストを日本語フォントで表示したい場合には、欧文フォントは指定しないようにしましょう。
欧文フォントと日本語フォントを組み合わせる場合のコツ 欧文フォントと日本語フォントを組み合わせる場合は、大前提として、セリフ体とゴシック体、サンセリフ体と明朝体のように、欧文フォントと日本語フォントの書体デザインのカテゴリーを揃えることです。 それを踏まえた上で、重要なポイントが書体の太さをなるべく揃えることです。書体の太さに差があると、どちらかだけが浮き上がって見えてしまい、読者の視線に引っ掛かりが出来てしまいます。読者は文章をスムーズに読み進めることが出来ません。 「そんなに気にするほどの事ではないのでは…」と思うかもしれませんが、読ませたい文章の量が多ければ多いほど、読者が感じる違和感やストレスは大きくなります。サイトからの途中離脱につながる可能性もありますので注意しましょう。 極端な例ですが分かりやすい例を以下に掲載しておきます。 フォントの太さを揃えた場合 フォントの太さに差がある場合 |
ここからは各OS(Windows、macOS、iOS)の標準インストールフォント(初めから入っているフォント)の中から、多くのWebサイトで使用されている代表的なフォントファミリー名を紹介していきます。
それぞれのフォントの表示例と、font-familyに記述すべき固有名称も合わせて記載しておきます。フォントを選定する際の参考にしてみてください。
標準インストールOS | font-family記述用の固有名称 |
---|---|
![]() |
MS Gothic、MS ゴシック |
フォント表示プレビュー |
---|
Windows/Chrome表示 |
![]() |
標準インストールOS | font-family記述用の固有名称 |
---|---|
![]() |
MS PGothic、MS Pゴシック |
フォント表示プレビュー |
---|
Windows/Chrome表示 |
![]() |
標準インストールOS | font-family記述用の固有名称 |
---|---|
![]() |
Meiryo、メイリオ |
![]() |
※macOSは標準インストールではなく、Officeをインストールしている場合に自動的にインストールされます。
フォント表示プレビュー |
---|
Windows/Chrome表示 |
![]() |
macOS/Chrome表示 |
![]() |
※macOS Mojave10.14.**環境のSafariブラウザでフォントが表示されないバグ有り。
標準インストールOS | font-family記述用の固有名称 |
---|---|
![]() |
Meiryo UI |
![]() |
※macOSは標準インストールではなく、Officeをインストールしている場合に自動的にインストールされます。
フォント表示プレビュー |
---|
Windows/Chrome表示 |
![]() |
macOS/Chrome表示 |
![]() |
※UIフォントとは、表示幅を狭く設計したフォントです。UIのファイル名やメニュー名の表示用によく使用されています。
標準インストールOS | font-family記述用の固有名称 |
---|---|
![]() |
Yu Gothic、游ゴシック |
![]() |
YuGothic、游ゴシック体 |
※Windows8.1以降 標準インストール
フォント表示プレビュー |
---|
Windows/Chrome表示 |
![]() |
macOS/Chrome表示 |
![]() |
※Windows環境では、文字が細くかすれて見える場合があります。font-weightプロパティを500に設定することで読み易く調整できます。ただし、游ゴシックに続けて指定するフォントは、font-weight:500で太字にならないものを指定する必要があります。
※@font-faceを使って、フォントを再定義する方法も良く紹介されていますが、今後のブラウザバージョンアップによって@font-faceに関する仕様が変更される場合も考えられます。完璧な方法ではないことを理解した上で実装してください。
標準インストールOS | font-family記述用の固有名称 |
---|---|
![]() |
Yu Gothic UI |
※Windows10以降 標準インストール
フォント表示プレビュー |
---|
Windows/Chrome表示 |
![]() |
標準インストールOS | font-family記述用の固有名称 |
---|---|
![]() |
Hiragino Sans、ヒラギノ角ゴシック |
![]() |
※末尾にW0〜W9を付加して太さ指定可能。指定無しの場合、h1-h6タグはW7相当、Pタグ等はW4が自動設定されます。
フォント表示プレビュー |
---|
macOS/Chrome表示 |
![]() |
※ヒラギノ角ゴシック(Hiragino Sans)と、ヒラギノ角ゴシックProN(Hiragino Kaku Gothic ProN)」は、字形自体は同じです。ヒラギノ角ゴシック(Hiragino Sans)の方がフォントフェイスのバリエーションが多い新しく設計されたフォントです。
標準インストールOS | font-family記述用の固有名称 |
---|---|
![]() |
Hiragino Kaku Gothic ProN、ヒラギノ角ゴ ProN、Hiragino Kaku Gothic Pro、ヒラギノ角ゴ Pro |
![]() |
※末尾にW3/W6を付加して太さ指定可能。指定無しの場合、h1-h6タグはW6相当、Pタグ等はW3が自動設定されます。
※ProNとProの違いは、ProNがいくつかの漢字が旧字体、Proは略字体。
フォント表示プレビュー |
---|
macOS/Chrome表示 |
![]() |
※macOS Catalina以降では、font-familyに「Hiragino Kaku Gothic ProN(Pro)」を指定しても、正しくフォントが表示されない問題があります。Hiragino Kaku Gothic Pro(ProN)は、macOS High Sierra以降、すでに書類をサポートするために使える古いフォントのリストに指定されており、今後使用できなくなる可能性も考えられます。代替フォントとして「Hiragino Sans」も指定しておくと安心です。
標準インストールOS | font-family記述用の固有名称 |
---|---|
![]() |
Hiragino Maru Gothic ProN W4、ヒラギノ丸ゴ ProN W4 ※Hiragino Maru Gothic Pro W4、ヒラギノ丸ゴ Pro W4 |
![]() |
※末尾にW3/W6を付加して太さ指定可能。指定無しの場合、h1-h6タグはW6相当、Pタグ等はW3が自動設定されます。
※ProNとProの違いは、ProNがいくつかの漢字が旧字体、Proは略字体。
Nの付かないProフォントは、既に書類をサポートするために使える古いフォントのリストに入っています。
フォント表示プレビュー |
---|
macOS/Chrome表示 |
![]() |
標準インストールOS | font-family記述用の固有名称 |
---|---|
![]() |
Osaka |
※Osaka-Monoで等幅フォント(すべての文字の幅が同じ幅のフォント)を指定することも可能です。
フォント表示プレビュー |
---|
macOS/Chrome表示 |
![]() |
※Osakaは、表示幅を狭く設計したUIフォントです。旧Mac OSにおいて、UIのファイル名やメニュー名の表示用に使用されていました。
標準インストールOS | font-family記述用の固有名称 |
---|---|
![]() |
MS Mincho、MS 明朝 |
フォント表示プレビュー |
---|
Windows/Chrome表示 |
![]() |
標準インストールOS | font-family記述用の固有名称 |
---|---|
![]() |
MS PMincho、MS P明朝 |
フォント表示プレビュー |
---|
Windows/Chrome表示 |
![]() |
標準インストールOS | font-family記述用の固有名称 |
---|---|
![]() |
Yu Mincho、游明朝 |
![]() |
YuMincho、游明朝体 |
※Windows8.1以降 標準インストール
フォント表示プレビュー |
---|
Windows/Chrome表示 |
![]() |
macOS/Chrome表示 |
![]() |
※Windows環境では、文字が細くかすれて見える場合があります。font-weightプロパティを500に設定することで読み易く調整できます。ただし、游明朝に続けて指定するフォントは、font-weight:500で太字にならないものを指定する必要があります。
※@font-faceを使って、フォントを再定義する方法も良く紹介されていますが、今後のブラウザバージョンアップによって@font-faceに関する仕様が変更される場合も考えられます。完璧な方法ではないことを理解した上で実装してください。
標準インストールOS | font-family記述用の固有名称 |
---|---|
![]() |
Hiragino Mincho ProN、ヒラギノ明朝 ProN Hiragino Mincho Pro、ヒラギノ明朝 Pro |
![]() |
※末尾にW3/W6を付加して太さ指定可能。指定無しの場合、h1-h6タグはW6相当、Pタグ等はW3が自動設定されます。
※ProNとProの違いは、ProNがいくつかの漢字が旧字体、Proは略字体。
※Nの付かないProフォントは、既に書類をサポートするために使える古いフォントのリストに入っています。
フォント表示プレビュー |
---|
macOS/Chrome表示 |
![]() |
標準インストールOS | font-family記述用の固有名称 |
---|---|
![]() |
Arial |
![]() |
|
![]() |
フォント表示プレビュー |
---|
Windows/Chrome表示 |
![]() |
macOS/Chrome表示 |
![]() |
標準インストールOS | font-family記述用の固有名称 |
---|---|
![]() |
Arial |
![]() |
|
![]() |
フォント表示プレビュー |
---|
Windows/Chrome表示 |
![]() |
macOS/Chrome表示 |
![]() |
標準インストールOS | font-family記述用の固有名称 |
---|---|
![]() |
Helvetica |
![]() |
フォント表示プレビュー |
---|
macOS/Chrome表示 |
![]() |
標準インストールOS | font-family記述用の固有名称 |
---|---|
![]() |
Helvetica Neue |
![]() |
フォント表示プレビュー |
---|
macOS/Chrome表示 |
![]() |
※Helvetica Neueは、Helveticaを基に、読みやすさを向上させる目的で字幅や文字間などの設計を見直した改良版フォントです。Helveticaに比べて多くのフォントフェイスを持ちます。
標準インストールOS | font-family記述用の固有名称 |
---|---|
![]() |
Segoe UI |
フォント表示プレビュー |
---|
Windows/Chrome表示 |
![]() |
標準インストールOS | font-family記述用の固有名称 |
---|---|
![]() |
Verdana |
![]() |
|
![]() |
フォント表示プレビュー |
---|
Windows/Chrome表示 |
![]() |
macOS/Chrome表示 |
![]() |
San Franciscoは、Mac、iPhone、iPad、Apple Watch等で使用されているシステムフォントです。San Franciscoを指定する場合は、少し特殊なfont-familyの記述になります。
標準インストールOS | font-family記述用の固有名称 |
---|---|
![]() |
-apple-system, BlinkMacSystemFont |
![]() |
※「-apple-system」はSafari用、「BlinkMacSystemFont」がChrome用の記述です。カンマ区切りで2つとも記述しておきましょう。
※-apple-system, BlinkMacSystemFontは、フォント名ではなく、システムフォントを指定するための記述です。総称フォントsystem-uiと同義だと考えてください。ダブルクォーテーション(”)やシングルクォーテーション(’)の引用符では囲わないようにしましょう。
フォント表示プレビュー |
---|
macOS/Chrome表示 |
![]() |
-apple-systemの問題点 iOS11以降、-apple-system(Safari用)を指定した場合、欧文フォントだけでなく、日本語フォントにもシステムフォントのヒラギノ角ゴシックが指定されるようになりました。要するに、英語部分だけにSan Franciscoを使いたい場合の指定ができなくなりました。(BlinkMacSystemFontは、欧文だけに適用されます。) また、-apple-systemで出力されるヒラギノ角ゴシックは、少し小さなフォントサイズで出力されるというブラウザ仕様になっており、意図した表示の制御も難しくなっています。今後、ブラウザアップデートによって改善される可能性はありますが、現状-apple-systemによるフォントの指定はあまりお勧めできません。 どうしてもSan Franciscoを使いたい場合は、-apple-systemは指定せず、system-uiのみを指定する方が良いでしょう。ただし、Windowsもシステムフォントで表示されます。現実的には、San Franciscoに似た代替の欧文フォントと、日本語フォントにヒラギノ角ゴシックを指定する方法をお勧めします。 |
標準インストールOS | font-family記述用の固有名称 |
---|---|
![]() |
Times New Roman |
![]() |
|
![]() |
フォント表示プレビュー |
---|
Windows/Chrome表示 |
![]() |
macOS/Chrome表示 |
![]() |
※各OS標準インストールフォントについては、著者の独自調査の部分もありますため、調査時期やOSアップデートなどの影響により、内容が異なる場合があります。
各OSの標準インストールフォント ※iOSの標準インストールフォントについては、Appleのデベロッパーサイトに公式情報が記載されています。Platform/Typeの欄に[歯車アイコン]が付いてものがシステムフォントになります。 ※Androidの標準インストールフォントについては、公式情報を見つけることができませんでした。Androidについては、端末のメーカーによってもインストールされているフォントが異なる場合があります。 |
ここまでの解説を基に、おすすめのfont-family設定を「ゴシック体」「明朝体」「HTMLメール用」の3つタイプでご紹介します。Windows、macOS、iOSの多くの端末で問題なく表示されるようにスタンダードな設定にしてあります。
必ずしもご紹介するfont-family設定が正解という訳ではありません。フォントを入れ替えたり追加して、最適なfont-family設定にカスタマイズしてみてください。
Winの欧文フォント | Arial |
---|---|
Winの日本語フォント | 游ゴシック(代替フォント:メイリオ) |
macOSの欧文フォント | Helvetica Neue(代替フォント:Helvetica) |
macOSの日本語フォント | Hiragino Sans(代替フォント:Hiragino Kaku Gothic ProN) |
iOSの欧文フォント | Helvetica Neue(代替フォント:Helvetica) |
iOSの日本語フォント | Hiragino Sans(代替フォント:Hiragino Kaku Gothic ProN) |
総称フォント | sans-serif(ゴシック体) |
font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
Winの欧文フォント | Times New Roman |
---|---|
Winの日本語フォント | 游明朝(代替フォント:MS P明朝) |
macOSの欧文フォント | Times New Roman |
macOSの日本語フォント | 游明朝体(代替フォント:Hiragino Mincho ProN) |
iOSの欧文フォント | Times New Roman |
iOSの日本語フォント | Hiragino Mincho ProN |
総称フォント | serif(明朝体) |
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
HTMLメールの場合も、各OS・端末に入っているフォントが利用されますが、一部のメーラーやWebメールなどでは、メールクライアントのデフォルトフォントが優先表示される場合もあります。
HTMLメールは、Webサイトに比べると横幅が狭いため、限られたスペースに文字を入れる必要があります。文字幅の狭いUIフォントや、文字間を自動調整してくれるプロポーショナルフォントを使用するとスペースを有効に使うことができるでしょう。
Winの欧文フォント | 未設定(日本語フォントで表示) |
---|---|
Winの日本語フォント | Meiryo UI(代替フォント:Yu Gothic UI、MS Pゴシック) |
macOSの欧文フォント | 未設定(日本語フォントで表示) |
macOSの日本語フォント | Hiragino Sans(代替フォント:Hiragino Kaku Gothic ProN) |
iOSの欧文フォント | 未設定(日本語フォントで表示) |
iOSの日本語フォント | Hiragino Sans(代替フォント:Hiragino Kaku Gothic ProN) |
総称フォント | sans-serif(ゴシック体) |
font-family: "Meiryo UI", "Hiragino Sans", "Yu Gothic UI", "MS PGothic", "Hiragino Kaku Gothic ProN", sans-serif;
Webサイトに比べて、より多くの閲覧環境が存在するHTMLメールにおいて、意図したフォントを確実に表示するには、font-familyプロパティの優先度がなるべく高くなるように、CSSセレクタの指定方法を工夫すると良いでしょう。
テーブルレイアウトでHTMLメールを作成している場合は、BODYタグではなくTDタグに対してfont-familyを設定したり、 !Important指定を付加してCSS優先度を上げておきましょう。
td { font-family: "Meiryo UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "MS PGothic", sans-serif !Important; }
⇓ こちらの記事も参考になります
ノーコードでHTMLメールをかんたん作成! |
Webフォントの利用について しかしながら、Webフォントは、日本では未だに広くは普及していないのが現状です。その理由は、日本語はアルファベットに比べて文字数が遥かに多いため、Webフォントのファイル容量が膨大になるためです。Webサイトの表示速度を低下させる原因になるため、SEOの観点からも、Webフォントの使用を避ける企業が多いと推測されます。 欧文フォントのWebフォントのみを使用するのであれば、それほど気にする必要はありませんが、日本語のWebフォントを使用する場合には、Webフォントの読み込み設定を最適化(読み込み方や、必要なウェイトだけ読み込むなど)して、少しでも早くWebサイトが表示されるようなテクニックが必要になります。 |
font-familyの理解を深めるために、自分のPCやスマートフォンなどのデバイスに入っている標準インストールフォントを調べて、font-familyに設定してみましょう。font-familyに設定するべき固有名称を調べたり、フォントフェイス(太さやスタイル)のバリエーションを確認する際にも役立ちます。
Windows10の場合 [設定] > [個人用設定] > [フォント]から、インストールされているフォントを確認できます。 font-familyに設定するフォントファミリーの固有名称は、「完全名」を参照してください。 Windows10以前のOS場合 [ローカルディスク(C:)] > [Windows] > [Fonts] から、インストールされているフォントを確認できます。 font-familyに設定するフォントファミリーの固有名称は、初期設定では表示されていません。以下の手順でフォントファミリー名を表示します。 [表示手順] 1. 表示方法を[詳細]に変更する。 2. 項目名を右クリックして、[ファミリ]にチェックする。 |
[アプリケーション] – [Font Book]から、インストールされているフォントを確認できます。 font-familyに設定するフォントファミリーの固有名称は、「PostScript名」や「正式名称」を参照してください。 |
iOSの場合、[設定]-[一般]-[フォント]から、追加でインストールしたフォントを確認することができますが、標準インストールされたフォントは確認できません。 少しイレギュラーな方法ですが、メールアプリの[デフォルトのフォント]を変更する画面から、標準インストールフォントを確認することができます。 |
以上、font-familyの設定方法について解説してきました。前述した通り、ブラウザに表示されるフォントは、ユーザー側の環境に依存しますが、今回ご紹介した方法で、正しくfont-familyを指定していただければ、多くの環境で意図したフォントを表示させることができるはずです。
重要なポイントのおさらい |
また、font-familyの設定と合わせて、フォントサイズ、行間、文字間、文字色などのスタイルも上手く組み合わせてみてください。皆さまのWebサイトやHTMLメールの読みやすさをさらに向上させることができるはずです。
最後までお読みいただき、ありがとうございました。
今すぐメールマーケティングを始めたい方は、 |