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.
12 Answers
For the directory structure like so,
-- static |--fonts | |--abc.ttf | |--css |-- main.cssIn 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');
}
