title: In a Gatsby site with SCSS how do I import local fonts?
body: <p>Noob to Gatsby and SCSS I wanted to dive into both and learn them beginning of the new year. After following the <a href="https://www.gatsbyjs.com/docs/tutorial/" rel="nofollow noreferrer">Gatsby tutorial</a> I wanted to dive in and build a site based off the <a href="https://github.com/gatsbyjs/gatsby-starter-hello-world" rel="nofollow noreferrer">gatsby-starter</a>.</p>
  <p>Followed the documentation for <a href="https://www.gatsbyjs.com/docs/how-to/styling/sass/" rel="nofollow noreferrer">install &amp; config for SASS</a>.</p>
  <p>In <code>src</code> created a directory named <code>fonts</code> and added Open Sans:</p>
  <pre class="lang-sh prettyprint-override"><code>src/fonts/OpenSans-Regular.ttf
  src/fonts/OpenSans-Bold.ttf
  src/fonts/OpenSans-Italic.ttf
  </code></pre>
  <p>created a directory in <code>src</code> for SCSS called <code>main.scss</code> and created a partial directory to bring in typography:</p>
  <pre class="lang-sh prettyprint-override"><code>src/styles/main.scss
  src/styles/partials/_typography.scss
  </code></pre>
  <p><em>main.scss:</em></p>
  <pre class="lang-css prettyprint-override"><code>@import 'partials/typography';
  
  body {
    font-family: $font-primary;
  }
  </code></pre>
  <p><em>_typography.scss:</em></p>
  <pre class="lang-css prettyprint-override"><code>$font-primary: 'Open Sans', sans-serif;
  
  // Body Font:
  @font-face {
    font-family: $font-primary;
    font-style: normal;
    font-weight: normal;
    src: url('../../fonts/OpenSans-Regular.ttf') format('truetype');
  }
  </code></pre>
  <p>In <em>index.js</em> I bring in the SCSS with no issues:</p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react'
  import '../styles/main.scss'
  
  const Home = () =&gt; {
    return &lt;div&gt;Hello world!&lt;/div&gt;
  }
  
  export default Home
  </code></pre>
  <p>but in the terminal I get font errors for each font:</p>
  <blockquote>
  <p>Can't resolve '../../fonts/OpenSans-Regular.ttf' in '/path/to/project/src/styles'</p>
  <p>If you're trying to use a package make sure that '../../fonts/OpenSans-Regular.ttf' is installed. If you're trying to use a local file make sure that the path is correct.
  error Generating development JavaScript bundle failed</p>
  </blockquote>
  <p>Per research I dont see an answer and I've read:</p>
  <ul>
  <li><a href="https://stackoverflow.com/questions/62260913/global-scss-in-gatsby">global scss in Gatsby</a></li>
  <li><a href="https://www.gatsbyjs.com/docs/how-to/styling/using-local-fonts/" rel="nofollow noreferrer">Using Local Fonts</a></li>
  </ul>
  <p><em>gatsby-config.js:</em></p>
  <pre class="lang-js prettyprint-override"><code>module.exports = {
    plugins: [`gatsby-plugin-sass`],
  }
  </code></pre>
  <p><strong>Why am I getting an error when trying to bring in local fonts for this site?</strong> Also, I'm bringing in the local font because I read in the documentation there is an offline ability.</p>
  <hr />
  <p>Edit:</p>
  <p>Forked Gatsby with the Hello World Starter:</p>
  <p><a href="https://codesandbox.io/s/busy-wilbur-p447f?fontsize=14" rel="nofollow noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit Invisible Backdrop" /></a></p>