Webサイトで使用したいフォントの種類を指定するには、CSSのフォント関連プロパティを使うことで好きなフォントを指定することができます。しかし、必ずしも指定したフォントが表示されるわけではなく、ユーザーの環境に指定したフォントがインストールされていなければ表示はされません。それでは、フォントの設定について少し見ていきましょう。

フォントの種類を設定

使用したいフォントの種類を指定するには、font-familyプロパティを使います。指定するものは、フォント名とキーワードが指定できます。

font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', 'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;

このように、カンマ区切りで複数のフォントを指定することもできます。フォント名はシングルクォーテーションかダブルクォーテーションで囲みます。最後に指定している「sans-serif」はキーワードで大まかなフォントの分類を表します。
以下が、キーワードの種類となります。

キーワード種類
serif明朝系フォント
sans-serifゴシック系フォント
fantasyポップ系フォント
cursive草書体・筆記体系フォント
monospace等幅フォント

キーワードはシングルクォーテーションやダブルクォーテーションで囲むと認識されないので、囲まないようにします。また、指定する際は末尾に記述するようにします。

フォントサイズの設定

フォントサイズを設定するには、font-sizeプロパティを使います。指定する値には単位やキーワードが指定できます。

値意味
単位pxなどの単位を数値につけて指定
パーセント（%）指定する要素の親要素のフォントサイズに対するパーセンテージで指定
xx-small、x-small、small、medium、large、x-large、xx-largeブラウザによってサイズは異なるが、xx-smallが1番小さく、xx-largeが1番大きく表示
smaller、larger指定する要素の親要素のフォントサイズに対して1段階小さくか、1段階大きく表示

フォントサイズの指定については、フォントサイズの指定でremを使うも参考にしてみてください。

まとめて指定する

フォント関連のプロパティをまとめて指定することもできます。

font: normal 16px/1.5 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', sans-serif;

このように、フォントの種類やサイズ、スタイルなどをfontプロパティを使って指定することができます。まとめて指定する際は、順序に気を付ける必要があります。まず最初にfont-weightやfont-styleプロパティで指定したいものを空白で区切って指定します。次に、font-sizeの指定をします。行間を指定したい場合は、スラッシュ（/）で区切って指定をします。そして、最後にfont-familyを指定します。

決まったフォントを使いたい

最初に、ユーザーの環境にインストールされていないと指定したフォントを表示させることはできないと言いましたが、どうしてもこのフォントが使いたいという場合には、Webフォントというものを利用することで、どんなユーザーにも同じようにフォントを表示させることができます。使い方については、ウェブフォントを使用して、好きなフォントを表示させるを参考にしてください。

以上がCSSを使ってフォントを設定する方法となります。

おすすめの記事