CSS - Google 字体（蒙特塞拉特）不覆盖 Bootstrap 标准字体答案

【问题标题】：CSS - Google fonts (Montserrat) not overriding Bootstrap standard fontCSS - Google 字体（蒙特塞拉特）不覆盖 Bootstrap 标准字体
【发布时间】：2019-07-11 11:32:57
【问题描述】：

我正在尝试在我正在构建的网站上从谷歌字体上传蒙特塞拉特字体，但由于某种原因它没有发生。我在这里阅读了一个单独的问答，这表明它可能是 chrome 的问题？

我特别想要 Montserrat，因为它是最接近 Gotham 的 google 字体。

这就是我将它加载到我的文件中的方式 -

style.css

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,500,80);


body{
  font-family: 'Montserrat', sans-serif;
}

我也在引导链接下方 index.html 的 <head> 部分中尝试过 -

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,800" rel="stylesheet">

我不知道这是引导程序不想覆盖的问题还是单独的问题。任何帮助表示赞赏。

【问题讨论】：

你检查过这个问题的答案吗？ stackoverflow.com/questions/24075222/…
@Den 是的，我有。完全不清楚哪个答案是正确的。
您是否尝试过自定义下载引导程序，因为它是该主题中最好的答案之一？

标签： html css twitter-bootstrap fonts

【解决方案1】：

按照下面的代码。

<!DOCTYPE html>


<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,800" rel="stylesheet">
  <style>
    body {
      font-family: 'Montserrat', sans-serif;
    }
  </style>

  <body>

   <h1>Montserrat</h1>

  </body>

【讨论】：

是的，这会起作用，但这是一个真正的禁忌，不是吗？为什么没有这个就不行？
bootstrap css 会覆盖您的样式，因为 bootstrap 样式文件会在您的自定义 css 文件加载后加载。
更新了我的答案检查这个。

【解决方案2】：

我遇到了类似的问题，这就是我解决它的方法。首先将“Montserrat”字体导入“bootstrap.css”

 @import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700&display=swap');

然后用蒙特塞拉特替换字体系列；

body {
  margin: 0;
  font-family: Montserrat;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
}

【讨论】：