Google font doesn't work in https html page.
Hopefully there is a solution on this.
Below is an example of implementing google font in https site/page.
<link href='https://fonts.googleapis.com/css?family=Alfa+Slab+One' rel='stylesheet' type='text/css'>
Related
I'm having an issue with Google Web Fonts and SSL. Basically my html code was calling for the google web font's css file using "http", like so,
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,100' rel='stylesheet' type='text/css'>
Because of this, my site is showing "mixed content warnings" and a "shield" in the Google Chrome URL bar, and just as well shows an exclamation point by the lock in the Firefox URL bar.
So basically I changed the "http" in the referenced url to "https" like so:
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,100' rel='stylesheet' type='text/css'>
and the warnings disappear...BUT...now the google font does not display correctly. And I do not know why.
My website is here:
https://www.cleaningleader.com
Tried loading fonts locally, didn't seem to work. Also tried using schema agnostic URL = "//....", and that does not work either.
I do not know why the two solutions above do not work when I thought they should. Any ideas? Please feel free to elaborate on the issue and any topics I've touched upon. Thanks.
one of my client website uses font called Roboto. When I look on their pages all looks fine and font is working properly on all of them.
However they say that their products pages http://lichtblick-led.de/index.php/produkte.html showing other font instead of Roboto. Again, they say its only on that page and not on other pages.
Can any of you replicate the same problem?
P.S. They said they tested it from all browsers, few different computers, and even cleared the cache.
Cheers!
after an inspection of the page I noticed that it's not using the Roboto font
<link href="//fonts.googleapis.com/css?family=Lora:400,700&subset=latin,cyrillic" rel="stylesheet" type="text/css">
that is font Lora.
this needs to be changed
under HTML:
<link href='http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
OR
under CSS:
#import url(http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cyrillic);
You can further modify your selection over here on GoogleFonts
PS: I have included the latin & cyrillic subsets.
The link to load the Roboto font from the Goolge CDN isn't present on the products page:
<link href="//fonts.googleapis.com/css?family=Roboto:300,400,300italic&subset=latin-ext" rel="stylesheet" type="text/css">
Also you should load the fonts before the JavaScript to prevent FOUC.
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&subset=latin&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?
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&subset=latin&v=1399056353'
rel='stylesheet' type='text/css' media="all">
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.
I am using three Google Web Fonts:
<link href='http://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Bad+Script' rel='stylesheet' type='text/css'>
Bad Script and Roboto are rendering correctly, but Roboto Condensed doesn't render in some places, instead there is Times New Roman.
There is no problem in CSS, because Google Chrome shows correct font-family at Matched CSS Rules.
In addition i cleared font cache in Windows and browser and reinstalled default fonts in Windows.
On another PC and in different browsers it renders correctly.
Is there anyone stuck with the same problem?
Someone noticed the same problem here: Chrome for Android does not display Google webfonts correctly
I noticed the problem as well today. The Google Web Fonts are simply not rendered by Chrome for Android on my Nexus 7 (Android 4.2.2), when integrated from Google directly. I also noticed the same problem on Chrome for MacOS X.
To get around this, you could simply download the fonts and convert them on http://www.fontsquirrel.com/ for web usage.
I'm using this to link to some Google Fonts:
<link href='http://fonts.googleapis.com/css?family=IM+Fell+English+SC|Snippet|Sarina|Crushed|Caesar+Dressing|Montez|Bad+Script|Sofia|Fontdiner+Swanky|Just+Me+Again+Down+Here|Voltaire|Geo|Coming+Soon|Wellfleet|Passion+One|Rock+Salt|Homemade+Apple|Meddon|Rosario' rel='stylesheet' type='text/css'>
I'm using this code, which works in some browsers:
<span style="font-size: 110px;font-family:montez;"><b>Abcdefg</b></span>
Why doesn't the font doesn't appear in IE8? http://jsfiddle.net/3NbE5/
It seems that IE doesn't support multiple fonts in the href:
http://jsfiddle.net/3NbE5/3/
You had this href:
<link href='http://fonts.googleapis.com/css?family=IM+Fell+English+SC|Snippet|Sarina|Crushed|Caesar+Dressing|Montez|Bad+Script|Sofia|Fontdiner+Swanky|Just+Me+Again+Down+Here|Voltaire|Geo|Coming+Soon|Wellfleet|Passion+One|Rock+Salt|Homemade+Apple|Meddon|Rosario' rel='stylesheet' type='text/css'>
After removing the other fonts it worked:
<link href='http://fonts.googleapis.com/css?family=IM+Fell+English+SC|Montez' rel='stylesheet' type='text/css'>
Just in case the solution above don't cut it for you.
I got multiple fonts working on ie8 without any problems. My actual problem was using ie11 in compatibility mode for ie8, where google web fonts don't seem to work in any possible way.
I guess the lesson is, use a vm with the actual ie8. You can grab one here or here.