title: React w Gatsby: Why is that my font file is downloaded twice sometimes
body: <p>I am developing a website using Gatsby with React. And I found that every time I refresh the page, there is 1.6 MB / 1.6 MB resources loaded. I am kind of new to web development so I don't really know whether this is a lot to download or it is just moderate amount.</p>
  
  <p>However I do notice a problem, which is after I deploy my website on Netlify, the font file is requested twice so it is downloaded twice. 
  You can see in the screenshot there were two Roboto-Light files requested.
  <a href="https://i.stack.imgur.com/Jyyzc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Jyyzc.png" alt="enter image description here"></a></p>
  
  <p>Here is how I include the font file in my codebase.</p>
  
  <p>First I set a webpack alias <code>'@fonts': path.resolve(__dirname, 'src/fonts'),</code></p>
  
  <p>Then in <code>src/styles/fonts.js</code> I have </p>
  
  <pre><code>import RobotoLight from '@fonts/Roboto/Roboto-Light.ttf';
  export { RobotoLight};
  </code></pre>
  
  <p>Finally in my <code>src/styles/GlobalStyle.js</code> I have </p>
  
  <pre><code>import { createGlobalStyle } from 'styled-components';
  const GlobalStyle = createGlobalStyle`
  @font-face {
    font-family: 'Roboto';
    src: url(${fontFamilies.RobotoLight}) format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: auto;
  }
  ...
  </code></pre>
  
  <p>So whenever I need to apply this <code>RobotoLight</code> font I just set the element's <code>font-family</code> to be <code>Roboto</code>.</p>
  
  <p>I don't know why my font is downloaded more than once and I don't know if this way of including a font is the best practice. Also I'd like to know if <code>1.6 MB / 1.6 MB resources</code> is too much.</p>