Answer a question

I am working on a web application using Flask and Tailwind CSS and can’t import custom fonts. I can build the CSS file but the HTML template isn’t showing the font. How do I get my custom font to import?

I have this in my CSS build file:

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

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

Here is a sample of when I try to use my imported font:

<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>

Answers

I had this exact problem a while ago and have a solution that works. I ended up having to link a separate CSS file to each HTML template. Here is an example of what I did. I have my custom font and CSS file in my static folder. gameStyles.css is my Tailwind CSS file.

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

Here is an example of what I would put in styles2.css:

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

body {
    font-family: 'reg';
}

I tried everything and this was the only thing that worked for me. Hopefully this helps!

# python # xhtml # flask
Logo
Python

Python社区为您提供最前沿的新闻资讯和知识内容

更多推荐

cover

求助！为什么用InsCode部署会出现无限重定向？

avatar Python

如何重塑熊猫。系列

问题:如何重塑熊猫。系列 在我看来,它就像 pandas.Series 中的一个错误。 a = pd.Series([1,2,3,4]) b = a.reshape(2,2) b b 有类型 Series 但无法显示,最后一条语句给出异常,非常冗长,最后一行是“TypeError: %d format: a number is required, not numpy.ndarray”。 b.sha

avatar Python

在哪里可以找到有关 Keras 中默认权重初始化器的文档? [复制]

问题:在哪里可以找到有关 Keras 中默认权重初始化器的文档? [复制] 我刚刚在这里](https://keras.io/initializers/)中阅读了有关[中的 Keras 权重初始化器的信息。在文档中,只介绍了不同的初始化程序。如: model.add(Dense(64, kernel_initializer='random_normal')) 当我没有指定kernel_initia

avatar Python