フォントの設定

Posted on by

CSSを使用してフォントを設定することで、ウェブページのテキストの見た目をカスタマイズできます。
ここでは、フォントファミリーの設定方法とウェブフォントの導入方法について詳しく説明します。

フォントファミリーの設定

font-family プロパティ

font-family プロパティを使用して、テキストのフォントを指定します。
複数のフォントをカンマで区切って指定することができ、
ブラウザはリストの最初のフォントから順に利用可能なフォントを選びます。
最後に汎用ファミリを指定することが推奨されます。

フォントファミリーの種類

  • セリフ体（serif）：文字に飾りのあるフォント（例：Times New Roman, Georgia）。
  • サンセリフ体（sans-serif）：文字に飾りのないフォント（例：Arial, Helvetica）。
  • 等幅フォント（monospace）：すべての文字が同じ幅を持つフォント（例：Courier, Consolas）。

基本例

body {
    font-family: "Arial", "Helvetica", sans-serif;
}

フォントファミリーの指定

.serif-font {
    font-family: "Times New Roman", Times, serif;
}
.sans-serif-font {
    font-family: "Arial", Helvetica, sans-serif;
}
.monospace-font {
    font-family: "Courier New", Courier, monospace;
}

ウェブフォントの導入方法

ウェブフォントを使用すると、ウェブページにローカルに
インストールされていないフォントを表示できます。
Google FontsやAdobe Fontsなどのサービスを使用して、簡単にウェブフォントを導入できます。

Google Fonts の導入方法

Google Fontsは、無料で使用できるウェブフォントサービスです。

Google Fontsのサイトにアクセス

Google Fonts

フォントを選択

  1. 使用したいフォントを検索して選択します。
  2. 「Select this style」をクリックしてスタイルを選びます。

フォントをウェブページに追加

  1. 「Embed」タブをクリックし、HTMLの<head> セクションに追加するリンクタグをコピーします。
  2. CSSでfont-family プロパティを使用してフォントを指定します。

HTML

<!-- HTML内でフォントを読み込む -->
<head>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>

css

/* CSSでフォントを適用 */
body {
    font-family: 'Roboto', sans-serif;
}

Adobe Fonts の導入方法

Adobe Fonts（旧Typekit）は、有料のウェブフォントサービスです。
Adobe Creative Cloudのサブスクリプションに含まれています。

Adobe Fontsのサイトにアクセス

Adobe Fonts

フォントを選択

  1. 使用したいフォントを検索して選択します。
  2. 「Activate font」をクリックしてフォントを有効にします。

フォントをウェブページに追加

  1. Adobe Fontsから提供されたスクリプトタグをHTMLの<head> セクションに追加します。
  2. CSSでfont-family プロパティを使用してフォントを指定します。

HTML

<!-- HTML内でフォントを読み込む -->
<head>
    <link rel="stylesheet" href="https://use.typekit.net/xyz123.css">
</head>

css

/* CSSでフォントを適用 */
body {
    font-family: 'My Adobe Font', sans-serif;
}

自ホストのウェブフォントの導入方法

自分のサーバーにフォントファイルをホストして使用することもできます。
一般的なフォーマットはWOFF2、WOFF、TTF、EOT、SVGです。

フォントファイルをアップロード

サーバーにフォントファイルをアップロードします。

CSSでフォントを定義

@font-face を使用してフォントを定義し、font-family プロパティでフォントを適用します。

@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/MyCustomFont.woff2') format('woff2'),
         url('fonts/MyCustomFont.woff') format('woff'),
         url('fonts/MyCustomFont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'MyCustomFont', sans-serif;
}

まとめ

CSSを使用してフォントを設定する方法には、font-family プロパティを使用する方法と、
Google FontsやAdobe Fontsのようなウェブフォントサービスを利用する方法があります。
また、自ホストのフォントを使用する場合は、@font-face ルールを使用してフォントを定義します。
これらの方法を理解し、適切に使用することで、
ウェブページのテキストの見た目を効果的にカスタマイズできます。