title: Django, CSS3, and font-face: how to load local font files?
body: <p>So I have a Django app <code>&lt;my-app&gt;</code> and I would like to load some local font files into the base template <code>&lt;my-app&gt;/templates/&lt;my-app&gt;/base.html</code>.</p>
  
  <p>For example, under <code>&lt;my-app&gt;/static/&lt;my-app&gt;/fonts/Lato/</code> I have several <code>.ttf</code> files:</p>
  
  <ul>
  <li>Lato-Black.ttf</li>
  <li>Lato-BlackItalic.ttf</li>
  <li>Lato-Bold.ttf</li>
  <li>etc</li>
  </ul>
  
  <p>and in <code>&lt;my-app&gt;/static/&lt;my-app&gt;/css/fonts.css</code> I have:</p>
  
  <pre><code>@font-face {
    font-family: Lato;
    font-style: normal;
    font-weight: 300;
    src:
    local('Lato-Black') url('../fonts/Lato/Lato-Black.ttf') format('truetype'),
    local('Lato-BlackItalic') url('../fonts/Lato/Lato-BlackItalic.ttf') format('truetype'),
    local('Lato-Bold') url('../fonts/Lato/Lato-Bold.ttf') format('truetype'),
    local('Lato-BoldItalic') url('../fonts/Lato/Lato-BoldItalic.ttf') format('truetype'),
    local('Lato-Hairline') url('../fonts/Lato/Lato-Hairline.ttf') format('truetype'),
    local('Lato-HairlineItalic') url('../fonts/Lato/Lato-HairlineItalic.ttf') format('truetype'),
    local('Lato-Italic') url('../fonts/Lato/Lato-Italic.ttf') format('truetype'),
    local('Lato-Light') url('../fonts/Lato/Lato-Light.ttf') format('truetype'),
    local('Lato-LightItalic') url('../fonts/Lato/Lato-LightItalic.ttf') format('truetype'),
    local('Lato-Regular') url('../fonts/Lato/Lato-Regular.ttf') format('truetype')
    ;
  
  }
  </code></pre>
  
  <p>Accordingly in <code>base.html</code>:</p>
  
  <pre><code>  {% load static %}
    &lt;link rel="stylesheet" type="text/css" href="{% static '&lt;my-app&gt;/css/fonts.css' %}" /&gt;
  </code></pre>
  
  <p>This does not load the fonts so that I can use them as if I used Google's api:</p>
  
  <pre><code>&lt;link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"&gt;
  </code></pre>
  
  <p>So how do I fix my CSS?</p>