2

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/bootstrap@5.1.3/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/bootstrap@5.1.3/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:

  1. Google font not working with bootstrap This didn't work for me
  2. Tried Googling around ...no solutions.
Tr0jAn
  • 123
  • 3
  • 14
  • 1
    Did you tried the 2nd or 3rd answer in linked question. It might help you – Rana Nov 18 '21 at 15:22
  • I was just looking at those as well Rana. ... Tr0jan, I have never ever seen that Import before in the way you have used it. I am just very used to the regular formatting which works perfectly and is `@import url('https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed');`. In this example the fonts called are Roboto and Roboto Condensed. – Cutey from Cute Code Nov 18 '21 at 15:26
  • The dev tools inspector shows bootstrap is overriding your styling. I believe Bootstrap is either loading last or it's a style hierarchy issue... [How can I override Bootstrap CSS Styles](https://stackoverflow.com/questions/20721248/how-can-i-override-bootstrap-css-styles). – Matthew Dangle Nov 18 '21 at 15:33
  • Matthew may have a good point. Especially since you're calling Bootstrap twice. Once in the Head and once in the Body. Try removing that line from the body. – Cutey from Cute Code Nov 18 '21 at 15:36
  • The one in the body is for the JS, not the CSS, so it's not a problem. But Bootstrap does seem to be taking priority over the custom style. – Siddharth Bhansali Nov 18 '21 at 15:37
  • @CuteCodeRob I think the `@import` statement is okay. I've copied from official google fonts. This is what is given google fonts site. – Tr0jAn Nov 18 '21 at 15:39
  • The import statement is fine, since the thing works fine when the bootstrap cdn is commented. – Siddharth Bhansali Nov 18 '21 at 15:40
  • You may try to override the `--bs-body-font-family` `--bs-font-sans-serif` variable. – RatajS Nov 18 '21 at 16:32
  • Link to the Google font within the HTML document itself, but under the link to Bootstrap CSS. Done. – mstephen19 Nov 18 '21 at 17:37

2 Answers2

3

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/bootstrap@5.1.3/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>
vorillaz
  • 6,098
  • 2
  • 30
  • 46
0

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/bootstrap@5.1.3/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/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
maazu
  • 21
  • 1
  • 2
  • 8