Django Use Static files URL in Static Files

Question

I want to use a custom font in my style.css file that will get served by StaticFiles

I know I can hard code it with something like this:

@font-face {
  font-family:"NotoSansArabic";
  font-style:normal;
  src:
  url("/static/myApp/fonts/NotoSansArabicUI-ExtraBold.ttf") format("truetype")
}

Im looking for something like:

{% static 'myApp/fonts/NotoSansArabicUI-ExtraBold.ttf' %}

Is there other way to do this?

Both font and style.css are served as Static

Thomas8 · Accepted Answer · 2018-09-29 17:42:29Z

1

For {% static %} to work you need to have a Django template; not a static file. This is actually possible: You can create a file named i.e djangostyle.css and put it in your templates folder. In this file you can use {% static %} as normally. Then, from your template you'll refer to this file using {% include %}.

If you want to see a full example of this take a look at my Django PDF guide article: https://spapas.github.io/2015/11/27/pdf-in-django/#changing-the-font-to-a-unicode-enabled-one

Here are the two relevant files from there:

The Django-template-stylesheet named pdfstylefonts.css in the templates directory:

{% load static %}
@font-face {
    font-family: "Calibri";
    src: url({% static "fonts/calibri.ttf" %});
}

And the html template:

{% load static %}
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        {% include "pdfstylefonts.css" %}
    </style>
    <link rel='stylesheet' href='{% static "pdfstyle.css" %}'/>
</head>
<body>
    <h1>Λίστα βιβλίων</h1>
    <img src='{% static "pony.png" %}' />
    <table>
        <tr>
            <th>ID</th><th>Title</th><th>Cover</th>
        </tr>
        {% for book in books %}
            <tr>
                <td>{{ book.id }}</td><td>{{ book.title }}</td><td><img src='{{ book.cover.url }}' /></td>
            </tr>
        {% endfor %}
    </table>
</body>
</html>

Notice the difference between the css-django-template (include it through <style>{% include "pdfstylefonts.css" %}</style>) and a normal css file (include it as normally with <link rel='stylesheet' href='{% static "pdfstyle.css" %}'/>).

edited Sep 29, 2018 at 17:42

Thomas8

1,1591 gold badge12 silver badges22 bronze badges

answered Sep 29, 2018 at 16:04

Serafeim

15.1k15 gold badges96 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DarkSuniuM Over a year ago

The bad thing about {% include %} is it will write all the styles in the head which make page loading slower than when we are using an external css file, anyway, thanks

Collectives™ on Stack Overflow

Django Use Static files URL in Static Files

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related