【font-family】の外部CSS指定方法
font（フォント）の書体も外部CSSで指定することで、HTMLソースがスッキリして、SEO内部対策として検索エンジン最適化に有効です。
SEO初心者でも簡単に検索エンジン上位表示ができるようにHTMLとCSSのソースサンプルを幾つかご紹介しますので、アクセスアップにお役立て下さい。
【font-family】の書式
font-family: 値;
font-family: キーワード,値;
font-family: キーワード,キーワード,値;
- 値にキーワード（フォントファミリー名）を記述して指定する。
- 細かく指定したい場合は、値の前にフォント名を指定する。
- 複数（日本語と英語など）の指定をする場合は、キーワードをカンマ（ , ）で区切って指定する。
- １文字目が大文字のフォント名やスペースが含まれているフォント名の場合には、ダブルクォーテーション（ " ）またはシングルクォーテーション（ ' ）で囲む。
※実際の表示や見え方は、ブラウザや使用環境に依存します。
また、SEO対策に不要と思われる値やキーワードは、独断で掲載していませんので予めご了承下さい。
【font-family】のキーワード（値）
| キーワード名（値） | 見え方 |
|---|---|
| serif | 明朝体の様なひげ付きのフォント。（Times New Roman、ＭＳ 明朝など） |
| sans-serif | ゴシック対の様なひげなしフォント。（ＭＳ Ｐゴシック、Helveticaなど） |
| monospace | ＭＳ ゴシックなど |
| fantasy | 均等フォント（CritterやWestemなど） |
| cursive | 手書き風フォント（Caflisch Scriptなど） |
【font-family】の使用例
「セレクタ名」と「値」は、お好みで指定して下さい。
明朝系のフォント（ＭＳ 明朝、Times New Romanなど）
▼ 表示
▼ HTML
<p class="sample01">SEO対策に必要な、HTML,CSSのタグ辞典です。コピペしてお使い下さい。</p>
▼ CSS
.sample01 {
font-family: "ＭＳ 明朝",serif;
}
ゴシック系等幅のフォント（ＭＳ Ｐゴシックなど）
▼ 表示
▼ HTML
<p class="sample02">SEO対策に必要な、HTML,CSSのタグ辞典です。コピペしてお使い下さい。</p>
▼ CSS
.sample02 {
font-family: "ＭＳ Ｐゴシック",monospace;
}
ゴシック系等幅のフォント（ＭＳ ゴシックなど）
▼ 表示
▼ HTML
<p class="sample03">SEO対策に必要な、HTML,CSSのタグ辞典です。コピペしてお使い下さい。</p>
▼ CSS
.sample03 {
font-family: "ＭＳ ゴシック",monospace;
}
装飾付きのフォント（critter、Westemなど）
▼ 表示
▼ HTML
<p class="sample04">SEO対策に必要な、HTML,CSSのタグ辞典です。コピペしてお使い下さい。</p>
▼ CSS
.sample04 {
font-family: Critter,fantasy;
}
手書き風のフォント（Caflisch、Scriptなど）
▼ 表示
▼ HTML
<p class="sample05">SEO対策に必要な、HTML,CSSのタグ辞典です。コピペしてお使い下さい。</p>
▼ CSS
.sample05 {
font-family: Caflisch,cursive;
}