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.
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.
since some weeks ago my chrome is rendering bad the google font "open sans", about firefox, it was rendering it bad always,
it is rendering bad in all websites with open sans, and with any weight or size.
I have read something about change chrome://flags/#enable-direct-write but I have not that option
I have cleaned cache,
I have a screnshot showing how it looks in my screen and below how it should look like,
That screenshot was taken from here: http://104.236.102.187/htmls/open/open.html
currently the version of chrome is 52,
windows 8.1 pro
64bits
Thanks
I tested in latest Windows 10 (64-bit) on latest Firefox 48 and Chrome 52, and do not see like the screenshots above. And the Dev Tools shows Open Sans being loaded.
Have you also tried including the various font styles? Since your missing them from your CSS stylesheet href on your <link>.
It should be something like this so Google knows what font styles to deliver
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic" />
Google Web Font page has like 10 font styles for Open Sans
https://fonts.google.com/specimen/Open+Sans?query=open+sans
Look and see if the various font styles appear, if they do not it could be your graphics card or some kind of Windows 8 bug causing that kind of rendering.
UPDATE
Also check if ClearType is affecting the text in your browser. Try enabling and disabling it and see if you see a difference. In windows search for Adjust ClearType Text.
https://www.microsoft.com/typography/cleartype/tuner/tune.aspx
Recently after upgrading my Google Chrome browser to Version 32.0.1700.76 m I noticed that bold fonts have a blur/drop shadow effect on my sites using #font-face.
Here is an example site with bold text.
Here is an example site with bold headers.
Before updating my Chrome these sites were displaying font correctly, I have tested fonts in the following browsers and they are still displaying correctly:
Firefox 26.0
IE11
Opera 12.11
Safari 5.1.7
Is there any way to stop this blur effect other than downgrading Google Chrome?
EDIT
I sent a error report to Google about this issue and it seems like they have reverted the "blurry" effect on fonts. To avoid this issue go with Jukka K. Korpela's solution.
In the examples, you have declared only normal (regular) typefaces for Gotham and Sansation in #font-face rules, yet try to use bold face. This makes browsers apply algorithmic (synthetic) bolding, with varying results.
The solution is to get bold typefaces and declare them, in #font-face rules that have font-weight: bold.
I had the same issue. The question was asked almost 5 years back, but the problem still persists. I am using Chrome 69.
In my project when google font is used I got blurry text.
I use the google font via below code :
https://fonts.googleapis.com/css?family=Roboto:400,600,800'
rel='stylesheet' type='text/css'>
And the most important part in font-weight properties I always use
font-weight: bold
Solution: Now if you use 400,600,800 as normal, semi-bold and bold, of course then replace it with
https://fonts.googleapis.com/css?family=Roboto:light,regular,medium,thin,italic,mediumitalic,bold'
rel='stylesheet' type='text/css'>
Note: I am sharing a solution which solved my issue. It may not apply to your situation.
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 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.