Google Fonts not working

1

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.

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

The Google Fonts link is in my HTML Head.

And the H1 is in my CSS file

5

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.

1 Like
6

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

<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.)

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

1 Like
7

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

  2. yes.

8

Got it working.

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

9

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

10

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.

11

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