为什么谷歌字体不能与引导程序一起使用？答案

【问题标题】：Why is google font not working with bootstrap?为什么谷歌字体不能与引导程序一起使用？
【发布时间】：2021-12-29 11:44:41
【问题描述】：

Google 字体无法与引导程序一起使用。我在我的网站上使用谷歌字体和引导程序，但谷歌字体似乎不起作用。一旦我注释掉引导 CSS，Google 字体就会再次出现。

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

还有 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

尝试过的解决方案：

Google font not working with bootstrap这对我不起作用
尝试谷歌搜索...没有解决方案。

【问题讨论】：

您是否尝试过链接问题中的第二个或第三个答案。它可能会帮助你
我也只是在看那些 Rana。 ... Tr0jan，我以前从未以您使用过的方式见过 Import。我只是非常习惯于完美运行的常规格式，并且是@import url('https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed');。在此示例中，调用的字体是 Roboto 和 Roboto Condensed。
开发工具检查器显示引导程序正在覆盖您的样式。我相信 Bootstrap 要么是最后加载，要么是样式层次结构问题...How can I override Bootstrap CSS Styles.
马修的观点可能很好。特别是因为您两次调用 Bootstrap。一次在头上，一次在身体里。尝试从正文中删除该行。
body中的那个是给JS的，不是CSS的，所以没问题。但 Bootstrap 似乎确实优先于自定义样式。

标签： html css twitter-bootstrap google-fonts

【解决方案1】：

你所做的一切都是正确的。直到你的 CSS。您的正文上有“poppins”字体，但您的 Hello World 来自您的标题。尝试在 CSS body 和 * 元素选择器上添加 !important;。

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>

*选择器表示所有元素，但在覆盖更具体的选择器时将位于属性链的底部。

请注意，!important 标志会将 * 的字体样式呈现为绝对样式，即使已使用其他选择器来设置文本（例如，正文或可能是 p）。

【讨论】：

它仍然不起作用，这不是一个正当的理由。标题在正文中，应该继承正文的字体，因为它实际上是，但被 B5 文件覆盖。
我试过了，没用。
@Tr0jAn 看看这个小提琴。我看到的是 Poppins 字体。 jsfiddle.net/kameronmayers/bnL9temv/31
这确实有效，但将样式应用于所有内容并不是一个好习惯。解决了手头的问题，但没有告诉我们问题发生的原因。
在每个标签上应用 font-family 并不是一个好习惯。它应该与 body 标签一起使用

【解决方案2】：

您可以通过更改源 SASS 文件或覆盖框架使用的 CSS variables 来覆盖 Bootstrap 主题。

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

【讨论】：

【解决方案3】：

这对我来说是这样的。

*{
    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>

【讨论】：