Mysterious error with Google Fonts

StackOverflow https://stackoverflow.com/questions/23435040

Frage

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?

War es hilfreich?

Lösung 4

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.

Andere Tipps

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'>

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

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">
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top