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.
Related
I'm trying to use a Google font on my website in different weights. Here's the code I'm using:
<link href="//fonts.googleapis.com/css?family=Roboto:100,300,500" rel="stylesheet">
Everything works fine in Chrome and Safari. But in IE, everything looks bold, no matter what font-weight I set an element to have.
I have found one work around. If I load each font-weight individually (with the code below), everything works in IE.
<link href="//fonts.googleapis.com/css?family=Roboto:100" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet">
That works, but it's inefficient. Anyone have a better solution?
Thanks!
Try putting the proper google fonts suggested line:
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,500' rel='stylesheet' type='text/css'>
Or put the fonts into your css file:
#import url(https://fonts.googleapis.com/css?family=Roboto:100,300,500);
Don't know what else could help, sorry.
It turns out the issue was that IE was set to load intranet sites in compatibility mode. Since the dev environment is on the local network (and thus an intranet site), IE was switching into compatibility mode without my knowledge. Turning that setting off fixed the issue
I am working on a website that isn't loading properly on Mozilla Firefox.
It loads great on Google Chrome, Opera and Safari but experiencing troubles loading on Mozilla and IE.
Using Bootstrap, HTML and CSS for the website.
Website link: http://alumniapp.in
Problems being faced on Mozilla: It loads the Bootstrap Stylesheet but not my style.css.
Problems being faced on IE: Does not work at all.
Any insight is extremely helpful. This is the first problem I haven't been able to solve.
Many thanks.
try to change
<link href="style.css" rel="stylesheet" type="style/css">
to
<link rel="stylesheet" type="text/css" href="style.css">
This should fix the problem.
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.