Django – New fonts?
Question:
How do I install new fonts with Django? There is no mention of this in the documentations.
I have my fonts installed in the static folder as such fonts/abc.ttf
For instance, in a template if this was a CSS I would link it as such:
<link href="{% static 'fonts/abc.ttf' %}" rel="stylesheet" media="screen">
except this is not CSS, and I haven’t found any resources on how to to do this.
Do I include the link in the CSS file like so?
@font-face {
font-family: 'abc';
src: url({% static 'fonts/abc.ttf' %});
src: local({% static 'fonts/abc.ttf' %})
}
Any help would be appreciated.
Answers:
For the directory structure like so,
-- static
|--fonts
| |--abc.ttf
|
|--css
|-- main.css
In the main.css
, you should add.
@font-face {
font-family: 'abc';
src: local('Abc'),
url('../static/fonts/abc.ttf') format("truetype");
}
You can’t use {% static 'filename' %}
inside a css file, since it will not be rendered by the django templating engine.
Also, if you want you can add the following in the <head>
section of base.html
, and it will render a fully qualified path for static assets:
<style>
@font-face {
font-family: 'abc';
src: local('Abc'),
url('{% static 'fonts/abc.ttf' %} format("truetype")');
}
</style>
Edit: Fixed the use of local
and also removed the preference around location of style tag in html.
I am using this option to avoid absolute path and/or css in html template:
@font-face {
font-family: 'HKGrotesk';
font-style: normal;
font-weight: bold;
src: local('HKGrotesk'), url('/static/fonts/hk-grotesk/HKGrotesk-SemiBoldLegacy.otf') format('opentype');
}
How do I install new fonts with Django? There is no mention of this in the documentations.
I have my fonts installed in the static folder as such fonts/abc.ttf
For instance, in a template if this was a CSS I would link it as such:
<link href="{% static 'fonts/abc.ttf' %}" rel="stylesheet" media="screen">
except this is not CSS, and I haven’t found any resources on how to to do this.
Do I include the link in the CSS file like so?
@font-face {
font-family: 'abc';
src: url({% static 'fonts/abc.ttf' %});
src: local({% static 'fonts/abc.ttf' %})
}
Any help would be appreciated.
For the directory structure like so,
-- static
|--fonts
| |--abc.ttf
|
|--css
|-- main.css
In the main.css
, you should add.
@font-face {
font-family: 'abc';
src: local('Abc'),
url('../static/fonts/abc.ttf') format("truetype");
}
You can’t use {% static 'filename' %}
inside a css file, since it will not be rendered by the django templating engine.
Also, if you want you can add the following in the <head>
section of base.html
, and it will render a fully qualified path for static assets:
<style>
@font-face {
font-family: 'abc';
src: local('Abc'),
url('{% static 'fonts/abc.ttf' %} format("truetype")');
}
</style>
Edit: Fixed the use of local
and also removed the preference around location of style tag in html.
I am using this option to avoid absolute path and/or css in html template:
@font-face {
font-family: 'HKGrotesk';
font-style: normal;
font-weight: bold;
src: local('HKGrotesk'), url('/static/fonts/hk-grotesk/HKGrotesk-SemiBoldLegacy.otf') format('opentype');
}