基于CSS优先的Google Font声明搭配@theme不生效问题求助

问题出在哪 #

1. 你定义的--font-Lato和--font-PlayfairDisplay是自定义变量，但Tailwind默认只会识别--font-sans、--font-serif这些内置字体变量，不会自动应用你的新变量。
2. 变量定义存在语法错误：逗号后缺少空格，且未添加备选字体（比如sans-serif），会导致CSS解析异常。
3. 没有明确指定页面元素要使用这些自定义字体。

两种可行解决方案 #

方案1：直接替换Tailwind默认字体（无需额外配置）

在@theme里覆盖Tailwind的内置字体变量，所有默认使用无衬线/衬线字体的元素会自动切换为你选的字体：

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

@import "tailwindcss";

@theme {
  --font-sans: "Lato", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-serif: "Playfair Display", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

方案2：保留自定义变量并手动应用

如果想保留自己的变量名，先修正语法，再通过全局样式或自定义类指定字体：

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

@import "tailwindcss";

@theme {
  --font-lato: "Lato", sans-serif;
  --font-playfair-display: "Playfair Display", serif;
}

/* 给body全局应用Lato字体 */
body {
  font-family: var(--font-lato);
}

/* 自定义类，方便给特定元素指定字体 */
.font-lato {
  font-family: var(--font-lato);
}

.font-playfair {
  font-family: var(--font-playfair-display);
}

之后在HTML中使用自定义类调用：

<p class="font-lato">这是Lato字体的文本</p>
<h1 class="font-playfair">这是Playfair Display字体的标题</h1>

注意点 #

• 导入顺序不能乱：先导入Google字体，再导入Tailwind，最后写@theme规则。
• CSS变量名尽量用小写加短横线的规范，符合CSS标准。
• 一定要添加备选字体，防止自定义字体加载失败时页面显示异常。

内容的提问来源于stack exchange，提问作者Aarav Raj