CODEWITHSUNDEEP
htmlcsstwitter-bootstrapfonts
Mike.Whitehead
Mike.Whitehead

Reputation: 818

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

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.

Upvotes: 0

Views: 9610

Answers (2)

user9780720
user9780720

Reputation: 11

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;
}

Upvotes: 1

sarathkumar
sarathkumar

Reputation: 191

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>

Upvotes: 4

Related Questions