导入自定义字体 Flask 和 Tailwind CSS

Question

我正在使用 Flask 和 Tailwind 开发 Web 应用程序 CSS，但无法导入自定义字体。我可以构建 CSS 文件，但 HTML 模板不显示字体。如何导入自定义字体？

我的 CSS 构建文件中有这个：

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

@font-face {
    font-family: 'Grifter';
    src: url(../../static/Skyer-Regular.otf);
}

这是我尝试使用导入字体时的示例：

<head>
<link rel="stylesheet" href="{{ url_for('static', filename=’mainStyles.css') }}"/>
</head>

<body class = 'bg-black'>      
<div class = "font-pri text-3xl text-center text-white">
Sample Text
</div>
</body>

Answer 1

我刚才遇到了这个确切的问题，并且有一个有效的解决方案。我最终不得不 link 每个 HTML 模板单独的 CSS 文件。这是我所做的一个例子。我的静态文件夹中有自定义字体和 CSS 文件。 gameStyles.css 是我的 Tailwind CSS 文件。

<link rel="stylesheet" href="{{ url_for('static', filename='gameStyles.css') }}"/>
<link rel="stylesheet" href="{{ url_for('static', filename='styles2.css') }}"/>

这是我要放入的示例 styles2.css:

@font-face {
    font-family: 'reg';
    src: url(../static/ObjectSans-Regular.otf);
}

body {
    font-family: 'reg';
}

我尝试了所有方法，这是唯一对我有用的方法。希望这对您有所帮助！

导入自定义字体 Flask 和 Tailwind CSS

Importing Custom Fonts Flask and Tailwind CSS

html

python

jinja2

flask

tailwind-css