# Google Fonts not working

**URL:** <https://forum.freecodecamp.org/t/google-fonts-not-working/177190>\
**Category:** General\
**Created:** [February 28, 2018, 3:45pm UTC](https://forum.freecodecamp.org/t/google-fonts-not-working/177190 "2018-02-28T15:45:04Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![josecoito](https://avatars.discourse-cdn.com/v4/letter/j/7cd45c/32.png) [@josecoito](https://forum.freecodecamp.org/u/josecoito)\
**Post date:** [February 28, 2018, 3:45pm UTC](https://forum.freecodecamp.org/t/google-fonts-not-working/177190/1 "2018-02-28T15:45:04Z")

</div>

Hey guys.  
Trying to import some Google Fonts but they’re not rendering on Chrome.  
Was using Codepen and it worked fine, but now I copy/paste my code to Brackets and the fonts are not working.

```auto
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Courgette|Dancing+Script|Great+Vibes|Lobster+Two|Open+Sans|Pinyon+Script|Satisfy" rel="stylesheet">

h1 {
  font-family: 'Pinyon Script', cursive;
  font-size: 4em;
}

```

---

<div class="post-metadata">

**Author:** ![josecoito](https://avatars.discourse-cdn.com/v4/letter/j/7cd45c/32.png) [@josecoito](https://forum.freecodecamp.org/u/josecoito)\
**Post date:** [February 28, 2018, 3:51pm UTC](https://forum.freecodecamp.org/t/google-fonts-not-working/177190/4 "2018-02-28T15:51:48Z")

</div>

The Google Fonts link is in my HTML Head.

And the H1 is in my CSS file

---

<div class="post-metadata">

**Author:** ![borntofrappe](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/borntofrappe/32/273293_2.png) [@borntofrappe](https://forum.freecodecamp.org/u/borntofrappe)\
**Post date:** [February 28, 2018, 6:03pm UTC](https://forum.freecodecamp.org/t/google-fonts-not-working/177190/5 "2018-02-28T18:03:48Z")

</div>

I tried to replicate your structure in a simple document and it works.

Assuming that:

1. the `<link>` attribute is declared in between the `<head>` tags of the HTML
2. in the same `<head>` tags you are referencing the CSS file, with another `<link>` attribute

Assuming that, there is no reason It should not work.

The only issue is that loading that many fonts slows down the load time, as Google Font itself specifies. Maybe that, coupled with a relatively slow internet connection may cause the fallback to available fonts.

EDIT UPDATE: if you open the chrome developer console you may check for this issue. It should appear with an error message stating the fallback to other fonts.

---

<div class="post-metadata">

**Author:** ![IsaacAbrahamson](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/isaacabrahamson/32/30882_2.png) [@IsaacAbrahamson](https://forum.freecodecamp.org/u/IsaacAbrahamson)\
**Post date:** [February 28, 2018, 6:10pm UTC](https://forum.freecodecamp.org/t/google-fonts-not-working/177190/6 "2018-02-28T18:10:07Z")

</div>

I was able to get it working with just this HTML:

```auto
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Courgette|Dancing+Script|Great+Vibes|Lobster+Two|Open+Sans|Pinyon+Script|Satisfy" rel="stylesheet">

<style>
  h1 {
  font-family: 'Pinyon Script', cursive;
  font-size: 4em;
}
</style>

<h1>Hello, world!</h1>

```

You don’t need to use Head and Body elements, just make sure your link is at the top. I recommend not using head and body elements, and so does Google:

> For file size optimization and scannability purposes, consider omitting optional tags. The HTML5 specification defines what tags can be omitted.  
> (This approach may require a grace period to be established as a wider guideline as it’s significantly different from what web developers are typically taught. For consistency and simplicity reasons it’s best served omitting all optional tags, not just a selection.)

```auto
<!-- Not recommended -->
<!DOCTYPE html>
<html>
  <head>
    <title>Spending money, spending bytes</title>
  </head>
  <body>
    <p>Sic.</p>
  </body>
</html>

<!-- Recommended -->
<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.

```

I would make sure you are linking the stylesheet correctly. Check adding other styles, and see if they get applied.

---

<div class="post-metadata">

**Author:** ![josecoito](https://avatars.discourse-cdn.com/v4/letter/j/7cd45c/32.png) [@josecoito](https://forum.freecodecamp.org/u/josecoito)\
**Post date:** [February 28, 2018, 7:34pm UTC](https://forum.freecodecamp.org/t/google-fonts-not-working/177190/7 "2018-02-28T19:34:57Z")

</div>

1. It is between the tags, right on top.

2. yes.

---

<div class="post-metadata">

**Author:** ![josecoito](https://avatars.discourse-cdn.com/v4/letter/j/7cd45c/32.png) [@josecoito](https://forum.freecodecamp.org/u/josecoito)\
**Post date:** [March 1, 2018, 3:22pm UTC](https://forum.freecodecamp.org/t/google-fonts-not-working/177190/8 "2018-03-01T15:22:43Z")

</div>

Got it working.

Just had to put the css local stylesheet below the bootstrap css in the `<head>` tag.

---

<div class="post-metadata">

**Author:** ![borntofrappe](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/borntofrappe/32/273293_2.png) [@borntofrappe](https://forum.freecodecamp.org/u/borntofrappe)\
**Post date:** [March 1, 2018, 8:57pm UTC](https://forum.freecodecamp.org/t/google-fonts-not-working/177190/9 "2018-03-01T20:57:21Z")

</div>

Glad to hear it works 🙂  
Small quirk of Bootstrap I guess; I’ll have to keep that in mind for future projects.

---

<div class="post-metadata">

**Author:** ![Nazarja](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/nazarja/32/91288_2.png) [@Nazarja](https://forum.freecodecamp.org/u/Nazarja)\
**Post date:** [March 1, 2018, 9:39pm UTC](https://forum.freecodecamp.org/t/google-fonts-not-working/177190/10 "2018-03-01T21:39:29Z")

</div>

I much prefer the @import method that goes in your css stylesheet, much cleaner.  
When picking your tonts on gfonts choose the @import way and copy and paste. I also like to grab the font family code they have and comment it out. That way when I need it it’s just, Ctrl C,Ctrl V and your done.

---

<div class="post-metadata">

**Author:** ![tarunkolla](https://avatars.discourse-cdn.com/v4/letter/t/e47774/32.png) [@tarunkolla](https://forum.freecodecamp.org/u/tarunkolla)\
**Post date:** [November 1, 2020, 9:06pm UTC](https://forum.freecodecamp.org/t/google-fonts-not-working/177190/11 "2020-11-01T21:06:03Z")

</div>

Not a fix to this solution but I had the same issue and the reason was:

`Mixed Content: The page at 'https://mypage.com' was loaded over HTTPS, but requested an insecure stylesheet 'http://fonts.googleapis.com/css?family=Great+Vibes'. This request has been blocked; the content must be served over HTTPS.`

I had to make it https in my index.html

Adding this hoping it helps others with the same issue

---

<div class="post-metadata">

**Author:** ![jwilkins.oboe](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jwilkins.oboe/32/179497_2.png) [@jwilkins.oboe](https://forum.freecodecamp.org/u/jwilkins.oboe)\
**Post date:** [November 1, 2020, 10:21pm UTC](https://forum.freecodecamp.org/t/google-fonts-not-working/177190/12 "2020-11-01T22:21:08Z")

</div>

Closed on November 1, 2020, 10:21pm UTC