Using custom font in django Css

Question

I'm trying to use a custom font in my Django app.

Here are the relevant lines from my base.html:

{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'recipebook/style.css' %}">

Here is my css file:

@font-face {
    font-family: "FiraCode-Retina";
    src: url("fonts/FiraCode-Retina.ttf") format("truetype");
}

body {
    margin: 0px;
    background-color: aliceblue;
}

.banner {
    border: 1px solid rgb(50, 50, 60);
    height: 75px;
}

.headnav {
    border: 1px solid rgb(50, 50, 60);
    height: 50px;
}

main {
    display: flex;
    height: 800px;
}

.navpanel {
    border: 1px solid rgb(50, 50, 60);
    flex-grow: 1;
}

.mainpanel {
    border: 1px solid rgb(50, 50, 60);
    flex-grow: 4;
}

.smartpanel {
    border: 1px solid rgb(50, 50, 60);
    flex-grow: 1;
}

.footerbar {
    border: 1px solid rgb(50, 50, 60);
    height: 50px;
}

Here is my file structure:

My CSS is working except for the font. What steps am I missing to get this working?

Where do you add the font-family? Can you show the full recipebook/style.css? — grisuu, May 17 '22 at 07:25
I've edited the original post to contain the whole .css file. — Evelyn, May 17 '22 at 14:01
related: https://stackoverflow.com/q/60998148, https://stackoverflow.com/q/12144000 — djvg, Apr 21 '23 at 07:09

score 1 · Accepted Answer · answered May 17 '22 at 20:14

1

The Problem is, that you never assign the loaded Font to any Element. You have to add it like

body {
    font-family: "FiraCode-Retina", sans-serif;
    margin: 0px;
    background-color: aliceblue;
}

Only the @font-face declaration is not enough.

answered May 17 '22 at 20:14

grisuu

189
1
9

score 0 · Answer 2 · answered Jan 31 '23 at 06:24

0

@font-face {
    font-family: 'GlassGauge';
    src: url({% static 'fonts/GlassGauge.ttf' %}) format('truetype');
}

answered Jan 31 '23 at 06:24

Dimanjan

563
6
13

Using custom font in django Css

2 Answers2

Linked