2021/02/15

CSSの日本語フォントを使う方法【現役エンジニアが解説】

PROGRAM

今回は、CSSの日本語フォントを使う方法について、3つのパターンに分け、簡単に解説していきます。

日本語フォントを使う

OSによって使える日本語フォントは異なります。

しかし、”ヒラギノ丸ゴ ProN”はWindowとMacの両方で使えます。

body{
    font-family:"ヒラギノ丸ゴ ProN", sans-serif;
}

上記のコードでは、body要素で”ヒラギノ丸ゴ ProN”のフォントを使用しています。

英語に欧文フォントを使う

英語と日本語とで使用するフォントを分けることができます。

この場合、英語用の欧文フォントを日本語フォントよりも先に指定します。

body{
    font-family:"Helvetica", "ヒラギノ丸ゴ ProN", sans-serif;
}

上記のコードでは、body要素で英語用のHelveticaと日本語用の”ヒラギノ丸ゴ ProN”を指定しています。

日本語のWebフォントを使う

日本語フォントでも、デザインの面でWebフォントはおすすめです。

GoogleフォントのAPIのCSSを読み込む方法もありますが、自分のサーバに用意しても良いでしょう。

@font-face {
  font-family:"任意のフォント名";
  src:url("任意のフォント名.woff") format("woff"),
      url("任意のフォント名.ttf") format("truetype"),
      url("任意のフォント名.otf") format("opentype"),
      url("任意のフォント名.eof") format("embedded-opentype"),
      url("任意のフォント名.svg") format("svg");
}
body{
    font-family:"任意のフォント名";
}

上記のコードでは、任意のフォント名を作り、フォントファイルを読み込み、body要素でそのフォントを使っています。

• facebook
• Tweet
• Read Later