TailwindCSSでfont-familyを設定する方法

TailwindCSSでfont-familyを設定する方法

TailwindCSSでfont-familyってどうやって設定するの?っとなったので、調べたことを書いておきます。

TailwindCSSの環境構築・導入方法は、もりけん先生のTailwindCSSハンズオンの記事を参考にしています!

もりけん先生のブログはこちら↓

https://kenjimorita.jp/tailwindcss-vite/

tailwind.config.jsに記述を追加する

まず、tailwind.config.jsを開きます。font-familyは、themeのfontFamilyに定義します。FontFamilyに、フォントの名前をつけて、使いたいフォントを定義します。

このようにすると、font-body というクラスが作られ、HTML側で使うことができるようになります。

module.exports = {
  content: [
    './index.html',
  ],
  theme: {
    extend: {},
    fontFamily: {
      body: [
        'Hiragino Sans',
        'ヒラギノ角ゴシック',
        'メイリオ',
        'Meiryo',
        'MS Pゴシック',
        'MS PGothic',
        'sans-serif',
        'YuGothic',
        'Yu Gothic',
      ],
    }
  },
  plugins: [],
}
<body class="font-body">
    <div class="m-12 text-center">

フォントの名前は、bananaとかringoとか、任意のものでオッケーです。この場合、HTML側で使うクラス名が、font-banana,font-ringoになります。

fontFamily: {
      banana: ['MS Pゴシック','MS PGothic','sans-serif'],
      ringo : [ 'Hiragino Sans','ヒラギノ角ゴシック','メイリオ','Meiryo,],
    }
<body class="font-banana">
    <div class="m-12 text-center">

Google Fontsなどの外部フォントを読み込みたい場合

CSSのファイルに、インポートします。下記のように記述します。

@import url("https://fonts.googleapis.com/css2?family=Zen+Kurenaido&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    font-family: Proxima Nova, system-ui, sans-serif;
  }
}

読み込んだフォントを、tailwind.config.jsに記述します。

module.exports = {
  content: [
    './index.html',
  ],
  theme: {
    extend: {},
    fontFamily: {
      zenKurenaido: ['Zen Kurenaido', 'sans-serif']
    }
  },
  plugins: [],
}
<h1 class="font-zenKurenaido">TaillwindCSS DEMO</h1>

読み込みできました!

<body class="font-zenKurenaido">
    <div class="m-12 text-center">

font-familyとメディアクエリを組み合わせることもできる

特定のブレークポイントで、font-familyを切り替えることもできます。TailwindCSSにはデフォルトで、一般的なブレークポイントが用意されています。

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      // => @media (min-width: 640px) { ... }

      'md': '768px',
      // => @media (min-width: 768px) { ... }

      'lg': '1024px',
      // => @media (min-width: 1024px) { ... }

      'xl': '1280px',
      // => @media (min-width: 1280px) { ... }
    }
  }
}

こんな感じにブレークポイントでフォントの切り替えをすることができます。

<p class="font-body sm:font-banana md:font-body lg:font-banana xl:font-ringo">

ブレークポイントはthemeのscreensに定義します。好きな名前にすることもできます。

module.exports = {
  theme: {
    screens: {
      tablet: '640px',
      // => @media (min-width: 640px) { ... }

      laptop: '1024px',
      // => @media (min-width: 1024px) { ... }

      desktop: '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  }
}

min-widthとmax-widthを同時に指定することもできます。

module.exports = {
  theme: {
    screens: {
      'sm': {'min': '640px', 'max': '767px'},
      'md': {'min': '768px', 'max': '1023px'},
      'lg': {'min': '1024px', 'max': '1279px'},
      'xl': {'min': '1280px'},
    },
  }
}

以上です!

さくっとTailwindCSSを使って作ってみたもの。グラデーションなどがサクッとできすぎて、驚きました。

TailwindCSSを使うと、複数のfont-familyやブレークポイントをまとめて定義できて、とても便利ですね!まだ、使い始めたばかりですが、JavaScript課題でもガンガン使っていこうと思います!

まい

フロントエンドエンジニア目指して、勉強中です。

Tailwind CSSカテゴリの最新記事