カスタムフォントの使い方


このセクションでは、Google WindowフォントをTailWindCSSに追加します.私たちはカスタムWindow @ importとlinkメソッドを見ることができます.まず、インストールしたり設定したりする必要があります.
view

例1


@ importメソッドを使用してカスタムフォントをCSSに追加します.TruwindディレクティブファイルでGoogle CSS CSS URLを追加する必要があります.
src/input.CSSまたはメイン.CSSまたは風車.CSS
@import url('https://fonts.googleapis.com/css2?family=Mea+Culpa&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;
次に、あなたの尾風にfontfamilyを追加する必要があります.設定.js
そよ風設定.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
          'culpa': ['"Mea Culpa"', 'cursive']
      }
    },
  },
  plugins: [],
}
インデックス.HTML
<div class="container mx-auto">
    <h1 class="text-4xl font-culpa">Tailwind CSS 3</h1>
</div>

例2


リンクメソッドを使用してHTMLファイルにカスタムフォントを追加します.
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS Google Fonts</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Mea+Culpa&display=swap" rel="stylesheet">s
    <script>
      tailwind.config = {
        theme: {
          extend: {
            fontFamily: {
              'culpa': ['"Mea Culpa"', 'cursive']
            }
          }
        }
      }
    </script>
  </head>

  <body>
    <div class="container m-12 mx-auto">
      <h1 class="text-6xl font-culpa">Tailwind CSS 3</h1>
    </div>
  </body>

</html>