I have a website. It uses 2 Google webfonts for its headings and body text. These work fine on Chrome/IE/Safari (including mobile) but when I view the site on my office computer running IE9 on Win7 the Google fonts do not load and fall back to a sans-serif.
Here is what I see:
IE9:
Chrome:
I cannot figure out why IE fails to load the font as I am aware that Google font's are compatible with IE7+. I figure it might be a security setting but can't get to the bottom of it. Any ideas.
I don't know if this is the issue, but try changing your request to only one link tag:
<link href='http://fonts.googleapis.com/css?family=Oswald|Lato' rel='stylesheet' type='text/css'>
Perhaps loading two fonts in two different requests causes issues.
On my IE9 it looked the same as in Chrome. Press F12 and make sure you are using proper Browser and Document Mode.
Related
I am having an issue with Font awesome icons and it's iE support.
It is working perfectly fine on all other browsers.
But for some reason on iE or Edge, the icon doesn't appear, There is a space of where it would go, yet there is no icon.
I noticed a difference in the styling when looking at the Dev tools in Chrome vs iE (iE10 to Edge).
The Internet options has download fonts enabled.
I have added the meta tag to the top of my <head> tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
I included the entire font awesome zip (even though i dont need less or scss folders)
I am using Font-awesome v4.6.3
and Bootstrap v3.3.7
please see image below to see differences in developer tools:
iE-DeveloperTools:
Chrome-DeveloperTools:
Other than that, I don't see any differences between the two.
Seems like it may be a Browserstack issue. I was using Broswerstack to test on different browsers and it seems to be having an issue with local Font awesome files, yet works with CDN.
I checked the path multiple times and it works on all browsers i am able to test on through my Mac. Guess im buying a PC too.
See comments above for details.
my html/css works fine with chrome, FF and IE11. Also with IE8 when loaded locally from my harddrive.
When the same files are located in an networkdrive the css seems not to work properly. Colors and fonts are fine, but some div-containers are displayed at the wrong positions.
When i transport the files in the htdocs of an apache fonts and colors are fine, but other problems occur with the positioning. Strangly not the same as when started from the networkdrive. Some divs are now correct, others ar now misplaced.
I´m not able to find any pattern with this.
I can check the behaviour within ff and chrome with the build-in dev-tools. But i don´t know of any similar tool within IE8.
Any idea for my 1001 attemp to fix the problem?
Thanks a lot!
Microsoft introduced different rendering modes for local and Internet servers so that web developers would break down in tears.
If there’s no X-UA-Compatible value and site is in Local Intranet
security zone, it will be rendered in EmulateIE7 mode by default.
Add X-UA-Compatible header or META to force full IE8 standards mode.
I have a site that is using the font Lato with weights 400, 300 & 100 from the Google Fonts API. The site works fine on my local machine but when published to the Intranet, the Lato font disappears and falls back on another font. I realise that this is a problem with Compatibility view as the problem disappears when the box in (IE 11) is unticked where it says 'Display Intranet Sites in Compatibility View'. However I cannot disable compatibility view as certain sites on the Intranet require it and it will cause problems.
Is there anyway to get this font to work correctly; I have tried Google and the various responses that come up say to try and use a meta tag in the html but this hasn't worked for me. Unfortunately, ditching Internet Explorer completely for FireFox, Chrome is not an option either despite the font working in both FireFox & Chrome.
This is how I am importing the font:
<link href='http://fonts.googleapis.com/css?family=Lato:400,100,300' rel='stylesheet' type='text/css'>
Used in CSS:
h1 {
font-family: "Lato", Arial, sans-serif;
font-weight: 100 !important;
}
Any help would be greatly appreciated,
Thanks
Looks like the IE bug for the src attribute parsers rears its ugly head when in compatibility mode. More information and a fix can be found in this answer.
The fact that you are using compatibility mode tells me you are trying to make IE use IE 9 or below, which don't support web fonts, well 9 does, but not 8 or 7. If the site works in Chrome and FireFox, then just render the site in edge or the latest version of IE and enjoy the modern goodness.
I am using two Google Web Fonts at my website. They are Roboto Slab and Fauna One. They look good in latest Mozilla Firefox and IE10 but for some reason they look horrible in Google Chrome.
They are linked to my website as follows:
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Fauna+One' rel='stylesheet' type='text/css'>
It took me a while to realize that Google Chrome has a problem with web fonts and that it renders them poorly. I am wondering if there is solution for this?
What if I download those two font types and embed them into the main directory of my website and then call them through CSS via #font-face property? Would Google Chrome in that case render those fonts nicely or I would still have the same problem and poorly rendered fonts???
Or there is some other solution for this issue?
Thank you all!
I believe I saw some bug report for Chrome where it was mentioned that this will be fixed - but I'm not 100% sure. I believe that it's not actually 100% the fault of Chrome...
My understanding is that the problem is to do with the order in which font types are presented in the #font-face directive. So, Chrome handles more than one type but not all types will render at equal quality. Apparently, Google actually doesn't serve the fonts in the right order from fonts.google.com - somehow...
In the end I found that, with Roboto at least (which I'm also using on a project), it is available for use on Font Squirrel (and open sourced under the Apache 2.0 license) - so you can download it here: http://www.fontsquirrel.com/fonts/roboto (download the Webfont Kit for full cross-browser font support) - you lose the CDN goodness of having it hosted on Google's servers if you use it from your own web server but, IMHO, I'd rather lose a few milliseconds than have to deal with such terribly rendered text...
I can't help you with Fauna One, unfortunately - it doesn't appear to be listed on Font Squirrel - perhaps you can find it on another font site? Or another similar font which is available on font squirrel?
From a web browser perspective (Chrome being the browser in question), Chrome 35 in Windows has difficulty rendering some fonts, like Roboto, without some horrible artifacts that make the font difficult to read.
There is a feature called DirectWrite that will be included by default in future versions of Chrome that will fix this problem. You can enable it now in Chrome 35 by going to chrome://flags in your browser URL bar. You can Enable DirectWrite (experimental in Chrome 35), close your browser, open and try again.
Just to be clear, I discovered this problem on Chrome 35 for Windows. DirectWrite is a DirectX API for rendering fonts in Windows. Chrome by default uses Windows Graphics Device Interface (GDI) which seems to be the problem.
See this article
I've checked a few places for an answer but I could not find one, so I thought I'd ask. I created a website on a free HTML5 template (the template was for a photo gallery). The website works fine on Google Chrome and Firefox but for some reason, some stuff like the fonts dont appear in Internet Explorer (tried with and without compatibility settings on IE9). Could this be because of IE's security measures or have I coded it incorrectly?
The website is at masidtech.com
On Chrome it looks like
But on Internet Explorer it looks like
I was going to use paste bin but the pastes look really ugly for source code.
So I have uploaded the entire website to MediaFire at http://www.mediafire.com/?9m2108pgzyje79t
and it's a 7Zip file (or I guess you could view source)
+I am no coding guru so I'd really appreciate if you could throw in some layman and thanks.
I faced similar issues in recent past. I can help you if you provide certain details. I just checked the link with the working image. I also tested the link with the notworking.jpg
Can you tell me the exact url in the browser which u see after http://masidtech.com/
for the non working image.
This is not a big issue, with modern browser in scene, and due to their hefty security policies the same website behaves differently in different browsers.
It seems that cufon doesn't work in IE9 – a friend has had a similar issue this week. I'm not sure why, or if there is a way to get cufon to work, as I haven't used it.
There are two options - keep using Cufon (why? I don't really get why Cufon exists!), and add this above your first replace() call:
<!--[if gte IE 9]>
<script type="text/javascript">
Cufon.set('engine', 'canvas');
</script>
<![endif]-->
Alternatively, and prefered, use font-face. If you use a eot, ttf and woff version of your font, it will work everywhere. http://www.fontsquirrel.com/fontface/generator has a tool to generate the fonts and the code from a ttf, if the font allows it.
You may find that http://www.google.com/webfonts has the font needed instead, which is Google's way of hosting fonts.
Edit: I've had a look and found Google has it: http://www.google.com/webfonts/specimen/Quicksand . Follow the wizard, stick their one line of code in your <head>, remove cufon and it will work.
Nice site design by the way :)