title: Self-Hosted Font with Gatsby & Tailwind (PostCSS)
body: <p>I was using a self-hosted font in Gatsby and that was working well. Basically I had -</p>
  <ul>
  <li>a <code>fonts/</code> folder in which all the <code>.woff2</code> files were placed, with a <code>fonts.css</code> that had all the @font-face calls (<em>this way because there were almost 15 @font-face calls)</em></li>
  <li>I had configured the <code>gatsby-source-filesystem</code> plugin in <code>gatsby-config.js</code> as below</li>
  </ul>
  <pre><code>      resolve: &quot;gatsby-source-filesystem&quot;,
        options: {
          name: &quot;fonts&quot;,
          path: `${__dirname}/src/fonts/`
        }
      },
  </code></pre>
  <p>I've now installed Tailwind with PostCSS as below -</p>
  <ul>
  <li>installed <code>tailwindcss</code> and <code>gatsby-plugin-postcss</code> using yarn</li>
  <li>configured <code>gatsby-config.js</code> as below -</li>
  </ul>
  <pre><code>{
       resolve: `gatsby-plugin-postcss`,
       options: {
         postCssPlugins: [
           require(`tailwindcss`),
           require(`autoprefixer`)
         ],
       },
     },
  </code></pre>
  <ul>
  <li>imported tailwind into <code>gatsby-browser.js</code> as below</li>
  </ul>
  <pre><code>import &quot;tailwindcss/base.css&quot;
  import &quot;tailwindcss/components.css&quot;
  import &quot;tailwindcss/utilities.css&quot;
  </code></pre>
  <p>Tailwind is working fine but it isn't using the font I want to use.....even though I have configured it correctly (I think) in <code>tailwind.config.js</code></p>
  <pre><code>extend: {
        fontFamily: {
          sans: [&quot;Custom Font Family Name&quot;, ...defaultTheme.fontFamily.sans],
        },
  </code></pre>