Mysterious error with Google Fonts

Question

I am trying to use Google fonts in this website. The link is in the head, if you click it the result is the correct. In the CSS, the font-family is the correct, but the font I am seen in my screen is not the correct.

This is the link:

<link rel="stylesheet" id="options-google-fonts" title="google-fonts" href="//fonts.googleapis.com/css?family=Open+Sans:300%7CMontserrat&amp;subset=latin&amp;v=1399056353" type="text/css" media="all" />

And the CSS:

.caption-wrap .line-2, .caption-wrap .line-3, .caption-wrap .line-5 a, .navbar-nav>li>a, .service-wrap .service-btm a {
font-family: Montserrat;
}

Nobody can tell me if is there a problem with this?

Where is there a problem? It's displaying correctly in Chrome — twinlakes, May 02 '14 at 19:12

score 1 · Answer 1 · answered May 02 '14 at 19:10

1

Use this snippet to link the CSS, it's done the way Google recommends to link their fonts:

<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>

answered May 02 '14 at 19:10

mbec83

11
2

The result page of the link is same so it would work – ThemesCreator May 02 '14 at 19:15

score 0 · Answer 2 · answered May 02 '14 at 18:58

0

You put the stylesheet <link> element inside the <body>. It should be in the <head>.

answered May 02 '14 at 18:58

twinlakes

9,438
6
31
42

score 0 · Answer 3 · answered May 02 '14 at 18:58

As far as Chrome is concerned, a page served as HTTPS should not be calling a resource served as HTTP. Chrome isn't picky about when things are the other way around, so it will happily retrieve an HTTPS resource via a page served as HTTP. Solutions

Match the protocols

Make sure you always call the https version of your Google Webfont URL. For example:

<link href='https://fonts.googleapis.com/css?family=Open+Sans:300%7CMontserrat&amp;subset=latin&amp;v=1399056353'
 rel='stylesheet' type='text/css' media="all">

Hard-coding the scheme is bad advice. Using `//:` is preferred as it will use the same scheme matching the page's URL. — Josh M., Feb 14 '19 at 13:21

score 0 · Accepted Answer · answered May 03 '14 at 11:34

0

This link was generated by Redux Options Framework. The problem seems to occurs only on Chrome in Windows 8.

The problem fixes deleting the title attribute.

answered May 03 '14 at 11:34

ThemesCreator

1,749
6
27
49

`title` is not a valid attribute for a `link` tag, so that makes sense. – Josh M. Feb 14 '19 at 13:22

Mysterious error with Google Fonts

4 Answers4