Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Django - New fonts?

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.

like image 360
DGDD Avatar asked Jan 25 '14 02:01

DGDD


People also ask

What is Django website?

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.


2 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.

like image 195
Saurabh Kumar Avatar answered Sep 24 '22 08:09

Saurabh Kumar


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'); } 
like image 30
matousc Avatar answered Sep 23 '22 08:09

matousc