Why is google font not working with bootstrap?-CodePudding

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.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Hello World</title>

    <!-- Bootstrap CSS -->
    
    <!-- Try commenting this and font will start working -->

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="style.css">


</head>
<body>
    <header>
        <h1>Hello World</h1>
    </header>
    <!-- Bootstrap Script -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
</body>
</html>

And CSS:

/* 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&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;
}

JSFiddle Here

Tried Solution:

Google font not working with bootstrap This didn't work for me
Tried Googling around ...no solutions.

CodePudding user response：

You can override the Bootstrap theme either by changing the source SASS files or by overriding the CSS variables used by the framework.

@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&display=swap');

@import url('https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css');

:root {
  --bs-font-sans-serif: Poppins;
}

<main role="main" class="container">

  <div class="starter-template">
    <h1>Bootstrap starter template</h1>
    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div>

</main>

CodePudding user response：

Everything you did was correct. Up until your CSS. You have the 'poppins' font on the body but you have your Hello World is coming from your header. Try adding !important; on your CSS body and * element selector.

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  !important;
  }

* {
  font-family: 'Poppins', sans-serif  !important;
}

/* 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&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 !important;
}

header {
  background-color: antiquewhite;
  text-align: center;
  padding: 10px;
}

* {
  font-family: 'Poppins', sans-serif !important;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Hello World</title>

  <!-- Bootstrap CSS -->

  <!-- Try commenting this and font will start working -->

  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

  <!-- Custom CSS -->
  <link rel="stylesheet" href="style.css">


</head>

<body>
  <header>
    <h1>Hello World</h1>
  </header>
  <!-- Bootstrap Script -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
</body>

</html>

The *selector means all elements but will be on the bottom of the property chain when it comes to overriding more specific selectors.

Note that the !important flag will render the font-style for * to be absolute, even if other selectors have been used to set the text (for example, the body or maybe a p).

CodePudding user response：

This how it worked for me.

*{
    font-family: 'Montserrat', sans-serif;
    padding: 0;
    margin: 0;
    outline: none;

}

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/index-html.css">
 
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300&display=swap" rel="stylesheet">

    <title>Stackoverflow Answer</title>
</head>
<body>
  <h1>Google Fonts Imported </h1>
  
    <script rel="preconnect" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>