html 如何在Tailwind CSS中使用Google字体

baubqpgj 于 2023-02-17 发布在 Go

关注(0)|答案(1)|浏览(201)

我正在做一个网站与顺风CSS，我想使用自定义字体从谷歌字体。我已经导入了HTML的<head>标签中的字体，然后我更新了我的tailwind.config.js文件。
不幸的是，当我添加引用导入字体的实用程序类时，字体并没有改变。
我想知道我做错了什么，我应该如何正确地使用谷歌字体在顺风CSS。

超文本标记语言

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <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=Barlow:wght@600&family=Fraunces:opsz,wght@9..144,700;9..144,900&display=swap"
      rel="stylesheet"
    />
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="/sunnyside-agency-landing-page/tailwind.css" />

    <title>Frontend Mentor | Sunnyside agency landing page</title>
  </head>
  <body class="font-barlow">
    <h1>Hello World</h1>
  </body>
</html>

顺风配置js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {
      fontFamily: {
        barlow: ['"Barlow"', "sans-serif"],
      },
    },
  },
  plugins: [],
};

当我将鼠标悬停在主体类名this message pops up上时。
Here are the computed styles
我还尝试删除'"Barlow"'中的双引号，但没有帮助。

Html

来源：https://stackoverflow.com/questions/75430797/how-to-use-google-fonts-in-tailwind-css

1条答案

按热度按时间

ffscu2ro1#

您需要在tailwind.config.js上配置content参数以包含html文件。

/** @type {import('tailwindcss').Config} */
    module.exports = {
      content: ["./src/**/*.{html,js}"],
      theme: {
        extend: {
          fontFamily: {
            barlow: ['"Barlow"', "sans-serif"],
          },
        },
      },
      plugins: [],
    };

赞(0）回复(0）举报 2023-02-17

我来回答

html 如何在Tailwind CSS中使用Google字体

1条答案

相关问题

热门标签

最新问答