CSS - Google fonts (Montserrat) not overriding Bootstrap standard font

Question

I'm trying to upload the Montserrat font from google fonts on a website I'm building and for some reason it's not happening. I've read a separate Q&A on here that suggests it may be an issue with chrome?

I want Montserrat specifically because it's the closest google font likeness to Gotham.

This is how I have it loaded on my file -

style.css

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


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

I tried it also in my <head> section in index.html underneath the bootstrap link -

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

I don't know whether it's an issue with bootstrap not wanting to override or a separate issue. Any assistance appreciated.

Have you checked this question answers? https://stackoverflow.com/questions/24075222/how-can-i-change-the-bootstrap-default-font-family-using-font-from-google — Senpai.D, Sep 20 '17 at 20:38
@Den Yes, I have. It's not clear at all which of the answers is the correct one. — Mike.Whitehead, Sep 20 '17 at 20:44
Have you tried making a custom download of bootstrap as it was one of the best answers in that topic? — Senpai.D, Sep 20 '17 at 20:54

sarathkumar · Answer 1 · 2017-09-20T21:00:50.333

4

Follow the below code.

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

edited Sep 20 '17 at 21:00

answered Sep 20 '17 at 20:36

sarathkumar

191
7

Yes, that will work but that's a reall no-no isn't it? Why will it not work without this? – Mike.Whitehead Sep 20 '17 at 20:46
bootstrap css overrides your style because bootstrap style file loads after your custom css file loads. – sarathkumar Sep 20 '17 at 20:54
Updated my answer check this. – sarathkumar Sep 20 '17 at 21:01

score 1 · Answer 2 · answered Jul 11 '19 at 03:32

I had a similar issue and this is how I solved it. First import the "Montserrat" font to the "bootstrap.css"

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

then replace the font-family with Montserrat;

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

CSS - Google fonts (Montserrat) not overriding Bootstrap standard font

2 Answers2