title: How to use Google Fonts API in React JS?
body: <p>I am trying to set Google Fonts in my React project but I am not being able to override the original font families of React.</p>
  <p>Following some tutorials I inserted the font-family I want into <code>index.css</code>:</p>
  <pre><code>body {
    /* margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Lemonada'
      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
      sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; */
    font-family: 'Lemonada', 
      cursive;
  }
  </code></pre>
  <p>I commented the original fonts for testing purposes.</p>
  <p>However the original fonts are not being overwritten:</p>
  <p><a href="https://i.stack.imgur.com/ksh3M.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ksh3M.png" alt="enter image description here" /></a></p>
  <p>If I inspect the file I see this:</p>
  <p><a href="https://i.stack.imgur.com/dBrYd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dBrYd.png" alt="enter image description here" /></a></p>
  <p>As you can see all the commented fonts are still there, besides there are a lot of other things that doesn't exist in <code>index.css</code>. Apparently it is coming from some <code>style.css</code> file, but I have no idea where to find this.</p>
  <p>If I uncheck this style I get the font-family I want:</p>
  <p><a href="https://i.stack.imgur.com/tfSKJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tfSKJ.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/RCDWG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RCDWG.png" alt="enter image description here" /></a></p>
  <p>And of course, I also added the api to my <code>index.html</code> file.</p>
  <p><code>&lt;link href=&quot;https://fonts.googleapis.com/css2?family=Lemonada:wght@300&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;</code></p>
  <p>I'd like to be able to add new font-families or at least override the original ones.</p>
  <p>What am I doing wrong?</p>