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.
Django is a high-level Python web framework that enables rapid development of secure and maintainable websites. Built by experienced developers, Django takes care of much of the hassle of web development, so you can focus on writing your app without needing to reinvent the wheel.
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'); }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With