[英]Custom @font-face Tailwind
I've been working on a project using Tailwind.我一直在使用 Tailwind 进行项目。 I'm trying to put a downloaded custom font using @font-face but it doesn't seem to load properly.
我正在尝试使用@font-face 放置下载的自定义字体,但它似乎无法正确加载。 By the way I put my font in public/assets/font.Please check my attempt below:
顺便说一句,我把我的字体放在 public/assets/font 中。请在下面检查我的尝试:
Here is the style.css file:这是 style.css 文件:
@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
font family: Trade Gothic LT;
src: url("../public/assets/font/TradeGothicLT.woff") format("woff");
}
And here is the tailwind.config.js file:这是 tailwind.config.js 文件:
module.exports = {
theme: {
extend: {
fontFamily: {
'body': ["Trade Gothic LT"]
},
},
},
};
Please tell me where I went wrong.请告诉我哪里出错了。 Thank you.
谢谢你。
According to Tailwind official page :根据Tailwind 官方页面:
Tailwind does not automatically escape font names for you.
Tailwind 不会自动为您转义字体名称。 If you're using a font that contains an invalid identifier, wrap it in quotes or escape the invalid characters.
如果您使用的字体包含无效标识符,请将其括在引号中或转义无效字符。
{
// Won't work:
'body': ['Trade Gothic LT', ...],
// Add quotes:
'body': ['"Trade Gothic LT"', ...],
// ...or escape the space:
'body': ['Trade\\ Gothic\\ LT', ...],
}
In addition to the answer by saboshi69: https://stackoverflow.com/a/69162193/8040054除了 saboshi69 的回答: https://stackoverflow.com/a/69162193/8040054
There is a little problem in your code in style.css:您的 style.css 中的代码有一点问题:
font-family: 'Trade Gothic LT';
You need to add font name in quotes您需要在引号中添加字体名称
@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
font family: Trade Gothic LT;
src: url("../public/assets/font/TradeGothicLT.woff") format("woff");
}
I think it should named: font-family??我认为它应该命名为:font-family??
==> My Solution today for adding local-fonts was: ==> 我今天添加本地字体的解决方案是:
tailwind.css:顺风.css:
@tailwind base;
@tailwind components;
@font-face {
font-family: "Dosis";
src: local('Dosis'), url("/fonts/Dosis-Regular.woff2") format("woff2");
}
@font-face {
font-family: "Montserrat";
src: local('Montserrat'), url("/fonts/Montserrat-Regular.woff2") format("woff2");
}
@tailwind utilities;
tailwind.config.js: tailwind.config.js:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./public/**/*.{html,js}',
],
theme: {
extend: {
fontFamily: {
'dosis': ['Dosis', 'sans-serif'],
'mont': ['Montserrat', 'sans-serif'],
},
},
},
plugins: [],
}
The 2 fonts are under the Root-directory in the fonts Folder 2 fonts 位于fonts文件夹的根目录下
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.