title: How to add fonts to create-react-app based projects?
body: <p>I'm using <a href="https://github.com/facebook/create-react-app" rel="noreferrer">create-react-app</a> and prefer not to <code>eject</code>.</p>
  
  <p>It's not clear where fonts imported via @font-face and loaded locally should go. </p>
  
  <p>Namely, I'm loading</p>
  
  <pre><code>@font-face {
    font-family: 'Myriad Pro Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff');
  }
  </code></pre>
  
  <p>Any suggestions?</p>
  
  <p>-- EDIT</p>
  
  <p>Including the gist to which Dan referring in his answer</p>
  
  <pre><code>➜  Client git:(feature/trivia-game-ui-2) ✗ ls -l public/static/fonts
  total 1168
  -rwxr-xr-x@ 1 maximveksler  staff  62676 Mar 17  2014 MYRIADPRO-BOLD.woff
  -rwxr-xr-x@ 1 maximveksler  staff  61500 Mar 17  2014 MYRIADPRO-BOLDCOND.woff
  -rwxr-xr-x@ 1 maximveksler  staff  66024 Mar 17  2014 MYRIADPRO-BOLDCONDIT.woff
  -rwxr-xr-x@ 1 maximveksler  staff  66108 Mar 17  2014 MYRIADPRO-BOLDIT.woff
  -rwxr-xr-x@ 1 maximveksler  staff  60044 Mar 17  2014 MYRIADPRO-COND.woff
  -rwxr-xr-x@ 1 maximveksler  staff  64656 Mar 17  2014 MYRIADPRO-CONDIT.woff
  -rwxr-xr-x@ 1 maximveksler  staff  61848 Mar 17  2014 MYRIADPRO-REGULAR.woff
  -rwxr-xr-x@ 1 maximveksler  staff  62448 Mar 17  2014 MYRIADPRO-SEMIBOLD.woff
  -rwxr-xr-x@ 1 maximveksler  staff  66232 Mar 17  2014 MYRIADPRO-SEMIBOLDIT.woff
  ➜  Client git:(feature/trivia-game-ui-2) ✗ cat src/containers/GameModule.css
  .GameModule {
    padding: 15px;
  }
  
  @font-face {
    font-family: 'Myriad Pro Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Myriad Pro Regular'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-REGULAR.woff') format('woff');
  }
  
  @font-face {
    font-family: 'Myriad Pro Condensed';
    font-style: normal;
    font-weight: normal;
    src: local('Myriad Pro Condensed'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-COND.woff') format('woff');
  }
  
  @font-face {
    font-family: 'Myriad Pro Semibold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Myriad Pro Semibold Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-SEMIBOLDIT.woff') format('woff');
  }
  
  @font-face {
    font-family: 'Myriad Pro Semibold';
    font-style: normal;
    font-weight: normal;
    src: local('Myriad Pro Semibold'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-SEMIBOLD.woff') format('woff');
  }
  
  @font-face {
    font-family: 'Myriad Pro Condensed Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Myriad Pro Condensed Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-CONDIT.woff') format('woff');
  }
  
  @font-face {
    font-family: 'Myriad Pro Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Myriad Pro Bold Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDIT.woff') format('woff');
  }
  
  @font-face {
    font-family: 'Myriad Pro Bold Condensed Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Myriad Pro Bold Condensed Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDCONDIT.woff') format('woff');
  }
  
  @font-face {
    font-family: 'Myriad Pro Bold Condensed';
    font-style: normal;
    font-weight: normal;
    src: local('Myriad Pro Bold Condensed'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDCOND.woff') format('woff');
  }
  
  @font-face {
    font-family: 'Myriad Pro Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Myriad Pro Bold'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLD.woff') format('woff');
  }
  </code></pre>