The Issue : When IE=EmulateIE8 is used in header New IE versions are rendering it with IE8 Engine, But google Returns WOFF as the font format. so It does not render correctly in IE.
Woff Support -> http://caniuse.com/woff
<META http-equiv=X-UA-Compatible content=IE=EmulateIE8>
Code Used (because it is an old site and something breaks when this is removed!!)
So removing this is out of the question I think...
This is my IE 11 Rendering in default format (IE8)
and when switched to IE11 Font loads correctly and displays!
My question is
how to request an older font from google fonts?
Any other approach to this?
Related
I have just noticed Google Fonts stopped serving their fonts in tff. Instead they do in woff2. Woff2 is not supported on iOS. And my layout gets all funny because of it.
Is there any way I can request the fonts in tff instead of woff2?
Thank you
You have to download the font using different browsers and watching the web inspector, thats because google detects which font type needs your browser.
Since IE 11 the Segoe UI font is rendered very differently in the browser, while it renders fine anywhere else in the system (including IE when accessing HTML locally via file:// or HTA). Here are some comparisons:
IE 8/9/10 render it identically to the second item shown ("IE 11 / file:// URL").
As you can see, Chrome is also slightly thinner, but much better in terms of keeping the previous kerning and widths, which is what I value most here.
I'd like to find a way to force Segoe UI to render as it once has. Things I tried:
Turning off GPU rendering in IE
Embedding Segoe UI via #font-face
Various font-weight values
Ideas?
-- Update --
Looks like the explanation is simpler than I thought. My HTML document mode is 8 (for good yet irrelevant reasons), enforced using the X-UA-Compatible meta. IE 9 and 10 properly use the "right" font rendering system for each mode (WPF-style for 9 and above, GDI-style for 8 and below). IE 11, however, forces WPF-style rendering in all document modes in the "Internet Zone". Both "Intranet" and "Local Computer" zones correctly choose the proper font rendering system.
I'd still like to find a way around this, if there is one.
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 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.
I'm using Google Font API to display my website logo. (See top of stolencamerafinder.com)
In Chrome the letters 'f' and 'i' appear seperately, but in FireFox, they are a nice joined ligature
How do I force Chrome to use the ligature?
If I use the ligature ascii character (fi) in the html then it doesn't use the font, it falls back to arial, yet the font (OFL Sorts Mill Goudy TT) must support that ligature since firefox displays it.
Update: I ended up ditching Google font API in favour of plain #font-face. More choice on fontsquirrel.com anyway.
Short answer: This feature isn't implemented yet.
Long answer: Take a look at http://crbug.com/22240 ( http://crbug.com/64479 might also be interesting).
Is it possible that in webkit browsers this property wasn't yet devoloped?
Or is it a problem of the type of font used by webkit browsers? (TrueType, Woff instead of Opentype)?
EDIT: In Safari this works with some fonts that support ligatures.
For example it works with the default browser font (Times on Mac Os X), while it doesn't work with a couple of Google fonts I was trying with #font-face CSS feature.