How to let static CSS files access other files such as .eot, .ttf, .woff, etc… on Django

Question

When I try to access styles.css, Django loads styles.css but not the files that it loads for itself.

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

here is the part of styles.css that I suspect is causing the problem

src: url("../fonts/icomoon/icomoon.eot?srf3rx");
src: url("../fonts/icomoon/icomoon.eot?srf3rx#iefix") format("embedded-opentype"), url("../fonts/icomoon/icomoon.ttf?srf3rx") format("truetype"), url("../fonts/icomoon/icomoon.woff?srf3rx") format("woff"), url("../fonts/icomoon/icomoon.svg?srf3rx#icomoon") format("svg");

It seems that the css file is unable to access the .eot files, but I have no way of knowing because django is showing everything as running smoothly.

Answer 1

I had the same issue and spent a little time searching how to solve it... Follow below what solved this issue for me:

1. You have to be sure your .ttf file is within any of the STATIC_ROOT paths... eg.:

   (eg.: {% static 'fonts/yourfontname.ttf'%}

2. In your .css file, create the @font-face parameters as show below: eg.:

   @font-face { font-family: yourfontname; src: url("../fonts/yourfontname.ttf"); }

   • VERY IMPORTANT: the font-family name has to be WITHOUT quotes! Most of the people do this mistake. Also, in the url path, I used .. because my fonts folder is one folder back from my .css file. So this path depends on your structure. I just want to mention that static do not work in css file, instead you have to consider the path from the .css file you are editing.

3. Now you just normally include the font name where you need it within the .css file. But at this time WITH quotes!!! eg.:

.logotext { font-family: 'yourfontname'; margin-left: 130px; font-size: 40px; etc...}