Mysterious error with Google Fonts

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

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?

Was it helpful?

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

OTHER TIPS

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">
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top