Google API font not supported in IE8 - css

i used below code for font support using from ,
<link href='http://fonts.googleapis.com/css?family=Open+Sans|Oswald|Play|Numans' rel='stylesheet' type='text/css'>
if i use the above URL, the fonts supported in all the browser.
#font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: normal;
src: local('Oswald '), local('Oswald'), url('http://themes.googleusercontent.com/static/fonts/oswald/v2/-g5pDUSRgvxvOl5u-a_WHw.woff') format('woff');
}
#font-face {
font-family: 'Numans';
font-style: normal;
font-weight: 400;
src: local('Numans'), local('Numans-Regular'), url('http://themes.googleusercontent.com/static/fonts/numans/v2/H6jkjoZl4TIrPYyjhdoCcw.woff') format('woff');
}
#font-face {
font-family: 'Play';
font-style: normal;
font-weight: normal;
src: local('Play'), url('http://themes.googleusercontent.com/static/fonts/play/v2/-SXnV4mZjf4oh1IBw13WZw.woff') format('woff');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url('http://themes.googleusercontent.com/static/fonts/opensans/v5/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}
i copied and paste the above css code in my CSS for fonts support.in IE8 Alone the font not supported. is there any fix for that.

The reason that it stops working when you copy the CSS is that Google sends back different CSS depending on the user agent that made the request.
The CSS returned for IE is different to the CSS you've copied.
So, if you're using Google Web Fonts, then use it with <link href.. as recommended.
If you want to host the font locally, read this: How to host google web fonts on my own server?

Related

Self-hosted fonts not loading in app. I am using #font-face and self hosted fonts in app server

I am hosting fonts in my server and it can be accessed like - https://cdn.mywebsite/fonts/font-name
Now I have a css file (in the same folder as index.html) where I am importing these using #font-face like this:
font-family: 'fontname';
src:url('https://cdn.mywebsite.com/fonts/font-name.woff2') format('woff2'),
url('https://cdn.mywebsite.com/fonts/font-name.woff') format('woff');
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: 'fontname';
src:url('https://cdn.mywebsite.com/fonts/font-name-light.woff2') format('woff2'),
url('https://cdn.mywebsite.com/fonts/font-name-light.woff') format('woff');
font-weight: 300;
font-style: italic;
}
...... and a few more
I tried importing this file in my index.html using 2 methods, both returning 404 error in network tab.
1.
<style type='text/css'>
#import url('fonts.css');
</style>
<link rel="stylesheet" type="text/css" href="fonts.css"/>
In #2, I've tried to use src/..../fonts.css and ./fonts.css and /fonts.css (similar tries for #1 too)
I am not sure what's happening and why its not working.
NOW what IS working is adding the css directly within component like this:
<style type="text/css">
#font-face {
font-family: 'fontname';
src:url('https://cdn.mywebsite.com/fonts/font-name.woff2') format('woff2'),
url('https://cdn.mywebsite.com/fonts/font-name.woff') format('woff');
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: 'fontname';
src:url('https://cdn.mywebsite.com/fonts/font-name-light.woff2') format('woff2'),
url('https://cdn.mywebsite.com/fonts/font-name-light.woff') format('woff');
font-weight: 300;
font-style: italic;
}
</style>
I'm using node express and react (but that shouldn't matter, I think).
Any help is greatly appreciated.
A few things to look at.
https://cdn/mywebsite.com/fonts/font-name.woff2 is not a valid URL, because cdn is not a valid hostname. You need https://cdn.mywebsite.com/fonts/font-name.woff2 or maybe something like https://cdn.example.com/mywebsite.com/fonts/font-name.woff2 for the woff2 font file object.
Your css needs to mention more than just the woff2 font file to work cross-browser. You need other formats too. Here's an example of part of a workable css file for FontAwesome. (See this. https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css)
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Your favorite search engine will find several online tools for creating web font assets, including the CSS files and the various font file formats.

Fonts look different on Firefox and IE than on Chrome

I am using three fonts that I load via #font-face and they all look like they are supposed to on Chrome, but on Firefox and IE they look different. Like with extra bold added to them and they are more blocky.
#font-face {
font-family: 'OpenSans-Regular';
src: url('../fonts/OpenSans-Regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Montserrat-Regular';
src: url('../fonts/montserrat-regular-webfont.woff2') format('woff2'),
url('../fonts/montserrat-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Roboto-Regular';
src: url('../fonts/roboto-regular-webfont.woff2') format('woff2'),
url('../fonts/roboto-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
How I apply these fonts to elements:
...
font-family: "OpenSans-Regular", sans-serif;
...
If I edit the element in Firefox with dev tools and set font-family: Open Sans then it works like it should.
This problem is giving me a headache as I don't understand why this is happening.
All applications are developed with specific blocks of code. This is like "Default Font" on HTML and CSS. It happens with all web pages that are opened on different browsers. Try this thing with
Facebook
and you will see the difference between fonts on Chrome and Firefox. If font looked bolder than you wanted it, just play with "font-weight" on CSS StyleSheet. e.g.:
body.font-weight: xx px;
late reply but here goes; Firefox renders headers and some other elements as "double bold" in your case so you would have to remove the font weight from the element in order to normalize this if you don't want to load more font files[1].
To improve the rendering, try loading the fonts as follows[2][3]:
#font-face {
font-family: 'Roboto';
src: url('../fonts/roboto-regular-webfont.woff2') format('woff2'),
url('../fonts/roboto-regular-webfont.woff') format('woff');
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: 'Roboto';
src: url('../fonts/roboto-bold-webfont.woff2') format('woff2'),
url('../fonts/roboto-bold-webfont.woff') format('woff');
font-weight: 700;
font-style: normal;
}
#font-face {
font-family: 'Roboto';
src: url('../fonts/roboto-italic-webfont.woff2') format('woff2'),
url('../fonts/roboto-italic-webfont.woff') format('woff');
font-weight: 400;
font-style: italic;
}
[1] It is better to have fewer fonts but include the correct ones
[2] just the Roboto as an example but the same would apply for the rest as well
[3] consider defining the values in absolute numbers rather than relative values as these can be interpreted differently by the different browsers
Answer to my question was having different font weights, e.g. if you have google fonts then make sure you have light(300), regular (400), medium (500), bold (700) versions imported.

#font-face is not working on IE 11. #import is not working well in Chrome. Why?

I'm trying to get Titillium-Wen, a Google Font, to work on all broswers. I prefer to self-host the font files.
The following code works well on Edge, Safari and Chrome, but not on IE 11. Text is displayed in a backup font as if IE 11 can not find the font:
#font-face {
font-family: 'Titillium Web';
src: url('/fonts/titillium/TitilliumWeb-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: 'Titillium Web';
src: url('/fonts/titillium/TitilliumWeb-Italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
}
#font-face {
font-family: 'Titillium Web';
src: url('/fonts/titillium/TitilliumWeb-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
#font-face {
font-family: 'Titillium Web';
src: url('/fonts/titillium/TitilliumWeb-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
The code below works on IE 11 but does not provide bold and italic fonts in Chrome. And anyway, I prefer to host the fonts myself:
#import url(https://fonts.googleapis.com/css?family=Titillium+Web);
Can I get the #font-face code to work on IE 11?
Try to use different font formats, as not all browsers support TTF.
#font-face{
font-family:'My Font';
src:url('../fonts/myfont.woff2') format('woff2'),
url('../fonts/myfont.woff') format('woff'),
url('../fonts/myfont.ttf') format('truetype');
font-weight:normal;
font-style:normal;
}
There are web services that will convert the font to different file formats for you. As far as I am concerned, using WOFF2, WOFF and TT covers all the browser versions I need to support.

Font for all ie browser version (6 to 10)

I am trying to find the code that can render font for IE versions 6 to 10. I tested the code from font squirrel, adobe webfonts and Google's font css but there is no code that works for all IE browsers.
Does anyone have the code for that?
I believe both of those services provide the code for all browsers that are supported, including IE, automatically.
For example, calling a font from Google font API with the style tag, will actually pull in a CSS file from Google with different font declarations.
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Karla:400,400italic,700,700italic" />
Generates the following CSS:
#font-face {
font-family: 'Karla';
font-style: normal;
font-weight: 400;
src: local('Karla'), local('Karla-Regular'), url(http://themes.googleusercontent.com/static/fonts/karla/v2/QT0qO2FiFD03cwUe_t62t6CWcynf_cDxXwCLxiixG1c.woff) format('woff');
}
#font-face {
font-family: 'Karla';
font-style: normal;
font-weight: 700;
src: local('Karla Bold'), local('Karla-Bold'), url(http://themes.googleusercontent.com/static/fonts/karla/v2/3nZS3BKzlvhkwl4yjCQcjHYhjbSpvc47ee6xR_80Hnw.woff) format('woff');
}
#font-face {
font-family: 'Karla';
font-style: italic;
font-weight: 400;
src: local('Karla Italic'), local('Karla-Italic'), url(http://themes.googleusercontent.com/static/fonts/karla/v2/ietJ6bjhwzrJL8NSJOc2mgLUuEpTyoUstqEm5AMlJo4.woff) format('woff');
}
#font-face {
font-family: 'Karla';
font-style: italic;
font-weight: 700;
src: local('Karla Bold Italic'), local('Karla-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/karla/v2/VZ08RdiotRdV1D0ewK-mxL3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');
}
As you can see, there are different formats for different browsers. WOFF is for IE.
Mikey.
PS - Something I mentioned in the comments below:
Are you working and viewing this in IE locally? If so, it may not work. For it to work in IE, I think you have to be viewing the website on an actual server. Something to do with the 'headers' and origin policy in IE - it's a security thing. Could that be it?

Custom font sometimes renders in italics in IE8 / IE7

In IE7 and IE8, when using a custom web font, text is sometimes rendered in italics, even when I explicitly set font-style: normal. The issue is sporadic - it will render fine a few times, then I refresh and everything is in italics, then I refresh and it's back to normal.
I'm using this #font-face declaration:
#font-face {
font-family: 'DIN';
src: url('fonts/DINWeb.eot');
src: url('fonts/DINWeb.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'DIN';
src: url('fonts/DINWeb-Bold.eot');
src: url('fonts/DINWeb-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'DIN';
src: url('fonts/DINWeb-Ita.eot');
src: url('fonts/DINWeb-Ita.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb-Ita.woff') format('woff');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'DIN';
src: url('fonts/DINWeb-BoldIta.eot');
src: url('fonts/DINWeb-BoldIta.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb-BoldIta.woff') format('woff');
font-weight: bold;
font-style: italic;
}
Theres a comment on this article that indicates it could be about the order of the #font-face declarations: however the only thing that stopped the problem was removing the italic declarations altogether.
Another Stack Overflow answer suggests using the Font Squirrel #font-face generator; I'm not able to do this however as the web font files I'm using have DRM.
Is there a way to solve this without completely removing the italic declarations?
UPDATE: Upon further investigation, it seems this issue affects IE8 as well, not just in compatibility mode.
For each of your #font-face font-family names, create a custom name instead.
Example:
#font-face {
font-family: 'DINnormal';
src: url('fonts/DINWeb.eot');
src: url('fonts/DINWeb.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'DINbold';
src: url('fonts/DINWeb-Bold.eot');
src: url('fonts/DINWeb-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'DINitalic';
src: url('fonts/DINWeb-Ita.eot');
src: url('fonts/DINWeb-Ita.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb-Ita.woff') format('woff');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'DINboldItalic';
src: url('fonts/DINWeb-BoldIta.eot');
src: url('fonts/DINWeb-BoldIta.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb-BoldIta.woff') format('woff');
font-weight: bold;
font-style: italic;
}
After those CSS rules are defined, then you can include specific CSS rule:
li {
font: 18px/27px 'DINnormal', Arial, sans-serif;
}
If, like me, you came across this question while experiencing a similar issue using TypeKit fonts, this entry from the TypeKit blog explains how you can force unique font-family names for each weight & style of a TypeKit font to address it.
I was having a similar issue, web font was showing in Italic when using IE8(Emulator), after digging and digging I came across a article that suggest emulator can sometimes be misleading especially when it comes to webFonts, and what it suggested was trying the site in the actual IE8, as I am using a windows 7 machine i wasn't able to download the real thing so I used this site called http://www.browserstack.com/ (No testers or fake browsers. Test in real browsers including Internet Explorer 6, 7, 8, 9, 10 and 11.)
and i noticed my font was not italic anymore :D
Here's the link to the article i read,
http://blog.typekit.com/2013/03/14/the-dangers-of-cross-browser-testing-with-ie9s-browser-modes/
Hope this helps you guys, if i came across something like this when researching it really would have saved me a few hours

Resources