Bootstrap overriding Google Font

Question

Despite looking at other answers I cannot get Bootstrap to not override the Google Font I want to use. I have tried changing the position of my stylesheets but nothing works.
Any help with this would be greatly appreciated.

http://codepen.io/01scatman/pen/KzGdNY

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
   <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
   <link rel="stylesheet" type="text/css" href="AOS-TC.css">
    <link href='https://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'>

Where do you specify your "arvo" font in your CSS. Use the `@font-face` CSS rule to do this. — ahPo, Apr 27 '16 at 21:31

score 2 · Answer 1 · answered Jan 21 '22 at 08:43

I had the same issue. To solve it, first, in your header put your static CSS link lower than all other ones, i.e. you need something like this

From

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="AOS-TC.css">
<link href='https://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'>

To

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="AOS-TC.css">

Second, add the proper font in your CSS 'body' tag

From

font-family: Arvo;

To

font-family: 'Arvo', sans-serif;

Maybe this is a little bit late. However, I believe it will be helpful for people who might have the same problem in the future.

Timothy Kanski · Answer 2 · 2016-04-27T22:27:50.507

0

I have nothing but the following in a document, and it works. Bootstrap is not overwriting the font.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="AOS-TC.css">
<link href='https://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>

<style>
  body{
    font-family: 'Arvo', serif;
  }
</style>

Hello

edited Apr 27 '16 at 22:27

answered Apr 27 '16 at 21:26

Timothy Kanski

1,861
14
20

I tried both of these and neither worked. I'm at a loss. – Craig Apr 27 '16 at 21:49
check this out: http://stackoverflow.com/questions/21678458/google-font-not-working-with-bootstrap – Timothy Kanski Apr 27 '16 at 21:52
I've looked at this prior and it did not help. – Craig Apr 27 '16 at 22:17
I'll play around with it – Timothy Kanski Apr 27 '16 at 22:22

score 0 · Answer 3 · answered Apr 28 '16 at 05:03

0

Maybe try adding "important" on your body CSS

body {
  margin: 0;
  padding: .1px;
  position: relative;
  background: url(http://www.adventuresofscatman.com/wp-content/uploads/2015/09/IMG_4273.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #555;
  overflow-x: hidden;
  font-family: Arvo !important;
  font-weight: 700;
}

answered Apr 28 '16 at 05:03

Bernie Carpio

321
1
3
10

1

or you can download the CSS and host it into your server https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css and replace the font-family on the specific tag where you want the Arvo font to apply. – Bernie Carpio Apr 28 '16 at 05:04

score 0 · Answer 4 · answered Jun 02 '16 at 12:39

Not sure why the font is being overridden, but you can use fontSwitcher (on CodePen) to apply it. I tried it on your pen and it applies Arvo. Add this line to the head:

<script src="http://codepen.io/freginold/pen/vLJewY.js"></script>

And this line to the JavaScript section:

fontSwitcher('fontName', 'elementClass');

fontSwitcher applies the Google font by class, so if you want to apply it to the whole body, assign a class to the body and then apply the font to that class.

You can also specify fallback fonts, like this:

fontSwitcher('fontName', 'elementClass'[, 'fallbackFont1', 'fallbackFont2' ...]);

Disclaimer: fontSwitcher is still a work in progress, but it's fully functional.

Also, adding `font-family: Arvo;` to the `.secondary` class applies Arvo to your sub-heading, so maybe you just need to target the font differently. — freginold, Jun 02 '16 at 12:50

Bootstrap overriding Google Font

4 Answers4