16
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

tailwindcssでfont-familyの設定をする

Posted at

tailwindcssで日本語のフォントを含めたfont-familyの設定をしたいと思い調べたのでメモします。

方法

1. 使用したいfont-familyを記述

tailwind.config.js に以下のような形式で使用したいfont-familyを書きます。

例)

tailwind.config.js
module.exports = {
  theme: {
    fontFamily: {
      body: [
        'Avenir',
        'Helvetica Neue',
        'Helvetica',
        'Arial',
        'Hiragino Sans',
        'ヒラギノ角ゴシック',
        'メイリオ',
        'Meiryo',
        'YuGothic',
        'Yu Gothic',
        'MS Pゴシック',
        'MS PGothic',
        'sans-serif'
      ]
    }
  },
  variants: {},
  plugins: []
};

(font-family は Font-familyメーカーより生成)

なおスペースなどを含むフォント名の場合は以下のようにダブルクオーテーションで囲むと良いそうです。
(参考: https://tailwindcss.com/docs/font-family/#app)

body: [
  '"Times New Roman"',
],

2. クラスを適用

上記のように設定すると、font-bodyというクラスが作られるので、それをbody要素に適応します。
例)

index.html

<html>
<!-- ... -->
<body class="font-body">
  <!-- ... -->
</body>
</html>

これでうまくいくはずです。

余談

上の例では、tailwind.config.jsでfontFamily以下にbodyというkeyを用意しましたが、実はkeyの名前はなんでもいいらしいです。例えばkeyをhogeにした場合は、font-hogeというクラスが生成されます。
(参考: https://github.com/tailwindcss/discuss/issues/293)

16
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?