title: Why is google font not working with bootstrap?
body: <p>Google Fonts not working with bootstrap. I'm using Google Font and Bootstrap for my website, but google fonts don't seem to work. As soon as I comment out the bootstrap CSS, Google font appears again.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;title&gt;Hello World&lt;/title&gt;
  
      &lt;!-- Bootstrap CSS --&gt;
      
      &lt;!-- Try commenting this and font will start working --&gt;
  
      &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3&quot; crossorigin=&quot;anonymous&quot;&gt;
  
      &lt;!-- Custom CSS --&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;header&gt;
          &lt;h1&gt;Hello World&lt;/h1&gt;
      &lt;/header&gt;
      &lt;!-- Bootstrap Script --&gt;
      &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>
  <p>And CSS:</p>
  <pre class="lang-css prettyprint-override"><code>/* Google Font Link */
  
  @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap');
  
  body {
      margin: 0;
      background: -webkit-gradient(linear, left top, left bottom, from(rgb(168, 168, 168)), to(#464645)) fixed;
      /* Font Family Not Working */
      font-family: 'Poppins', sans-serif;
    }
  header{
      background-color: antiquewhite;
      text-align: center;
      padding: 10px;
  }
  </code></pre>
  <p>JSFiddle <a href="https://jsfiddle.net/trojan14/pwLau2no/6/" rel="nofollow noreferrer">Here</a></p>
  <p>Tried Solution:</p>
  <ol>
  <li><a href="https://stackoverflow.com/questions/21678458/google-font-not-working-with-bootstrap">Google font not working with bootstrap</a> This didn't work for me</li>
  <li>Tried Googling around ...no solutions.</li>
  </ol>