title: Unable to load ttf fonts
body: <p>I have a CSS file that attempts to import <code>Open Sans</code>. I'm using <code>ttf</code> fonts downloaded from Google Fonts. I can't seem to get the font to work. It's still displaying the regular Times font.</p>
  
  <p><strong>fonts.css</strong></p>
  
  <pre><code>@font-face {
      font-family: "Open Sans";
      src: url("fonts/OpenSans-Regular.ttf") format("ttf");
  }
  </code></pre>
  
  <p><strong>app.css</strong></p>
  
  <pre><code>body {
      font-family: "Open Sans";
  }
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;link rel="stylesheet" href="dist/fonts.css" /&gt;
  &lt;link rel="stylesheet" href="dist/app.css" /&gt;
  </code></pre>
  
  <p>My directory structure is like so:</p>
  
  <pre><code>/app
   - dist
     - fonts
     app.css
     app.js
     fonts.css
   index.html
  </code></pre>
  
  <p>I've used Chrome's inspector to check if the font file is being pulled in, but it isn't. There's also no error. If I include the <code>css</code> file directly from Google then it works. I also notice that Google serves a different font format that isn't <code>ttf</code>.</p>
  
  <p>Note that I am developing a desktop application using Electron. Electron is powered by Chrome. My application is intended to run offline, hence why I am not linking directly to Google.</p>
  
  <p>Any idea what's going on?</p>