1

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
  • 91
  • 1
  • 11
  • 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 R. 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

3 Answers3

1

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
  • 5,717
  • 2
  • 27
  • 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
  • 7
-1

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/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>

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).

Kameron
  • 7,250
  • 3
  • 6
  • 22
  • It still doesn't work, and that's not a valid reason. The header is inside the body, and should inherit the font of the body, as it is actually, but is being overridden by B5 file. – Siddharth Bhansali Nov 18 '21 at 15:48
  • I tried this and it didn't work. – Tr0jAn Nov 18 '21 at 15:49
  • @Tr0jAn check out this fiddle. I'm seeing the Poppins font. https://jsfiddle.net/kameronmayers/bnL9temv/31/ – Kameron Nov 18 '21 at 15:53
  • That does work, but applying the style on everything is not a good practice. Solves the issue at hand, but doesn't tell us why the issue is happening. – Siddharth Bhansali Nov 18 '21 at 15:57
  • Applying font-family on every tag is not a good practice. It should work with the body tag – Tr0jAn Nov 18 '21 at 16:01
  • @SiddharthBhansali @Tr0jAn haha I was trying to show you that the font was imported successfully. Because when you set the font-family on those elements it works. A simple solution would be to add the `!important;` to the font-family on the `body` and `*` element on your CSS. Which is good practice! – Kameron Nov 18 '21 at 16:03
  • @Tr0jAn everything seems to be working correctly on this [fiddle](https://jsfiddle.net/kameronmayers/bnL9temv/37/) Can you think of any other issue other than the CSS or HTML being the culprit? – Kameron Nov 18 '21 at 16:12
  • I tried different font and is working correctly.. problem arrives when I use the "Poppins" font... it's weird.. other fonts are working except Poppins. Anyways Thanks:) – Tr0jAn Nov 18 '21 at 16:14
  • @Kameron, yeah I know it is working. And the font was being imported before as well, if you check OP's fiddle, the line from CSS does appear when inspecting, but is crossed out because of being overridden by Bootstrap. And `!important` isn't good either, the thing should be working without it. – Siddharth Bhansali Nov 18 '21 at 16:46