I cannot make font-face work on IE7 and IE8.
The code I used is:
#font-face {
font-family: 'DroidSans';
src: url('fonts/DroidSans.eot');
src: url('fonts/DroidSans.eot?iefix') format('eot'),
url('fonts/DroidSans.woff') format('woff'),
url('fonts/DroidSans.ttf') format('truetype'),
url('fonts/DroidSans.svg#webfont1BSMunJa') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'DroidSans';
src: url('fonts/DroidSans-Bold.eot');
src: url('fonts/DroidSans-Bold.eot?iefix') format('eot'),
url('fonts/DroidSans-Bold.woff') format('woff'),
url('fonts/DroidSans-Bold.ttf') format('truetype'),
url('fonts/DroidSans-Bold.svg#webfont1BSMunJa') format('svg');
font-weight: bold;
}
#font-face {
font-family: 'Lobster';
src: url('fonts/Lobster.eot');
src: url('fonts/Lobster.eot?iefix') format('eot'),
url('fonts/Lobster.woff') format('woff'),
url('fonts/Lobster.ttf') format('truetype'),
url('fonts/Lobster.svg#webfont1BSMunJa') format('svg');
font-weight: normal;
font-style: normal;
}
I have read these articles:
http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax
They all state this solution should be cross browser compatible:
Browser compatibility: Safari, IE 6-9, IE 9 Compatibility Modes, Firefox, Chrome, iOS, Android, Opera
What am I doing wrong? Is there anyone with experience in these things?
I'm testing this here: dev.holiday.ge/xhtml/
.eot files I generated using this website: http://fontface.codeandmore.com/ had problems, and ie 7-8 wasn't picking them up.
I used http://www.fontsquirrel.com/ and fonts load fine now, with my original code!
I've had your problem before. I've solved it with simple solution. I'm using 2 CSS files. One for IE and one for others. So my <head> is like this:
<link href="styles/css.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="styles/css.ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
And these are my CSS files:
/* css.css */
#font-face {
font-family: 'font';
src: local("☺"),
url("fonts/f1.woff") format("woff"),
url("fonts/f1.ttf") format("truetype");
}
IE Only CSS: (eot)
/* css.ie.css */
#font-face {
font-family: 'font';
src: url('fonts/f1.eot');
}
This works for me and I've used it many times before.
Is there a particular reason for not using the Google Web Fonts? Both of these fonts are already there and it's much more easier at the cost of some bandwidth. I use them all the time, and I haven't experienced a single problem in IE 7-8-9.
EDIT: As far as the problem goes, I'm not sure but I remember reading something about IE not accepting two src attributes. or multiple values in an src attribute. You might wanna look in to that if you decide to stick with your own css.
Because Internet Explorer 8 and earlier versions, do not support the #font-face rule.
See http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
#font-face belongs to CSS3 http://www.w3.org/TR/css3-fonts/
Another Q/A Do IE browsers (IE6, 7, 8) support #font-face?
Features that are not officially/fully supported (see: css3 spec) may still work (visually close) with some hacks.
As you can see, people who wrote articles know this already
What? I don't get it.
The (hack) trick that makes this work is the '?' following the EOT filename. Seriously.
Do you think that this url fits inside some standard, remember that here it is meant to be used only by browser: fonts/DroidSans-Bold.eot?iefix
One article states that in fact it is hack to get around IE bugs.
What if these bugs is now fixed? Does it still work?
For reference here is trident version http://msdn.microsoft.com/en-us/library/ms530303(VS.85).aspx and here is something that most call standard http://www.w3.org/TR/css3-fonts/#font-resources see also http://en.wikipedia.org/wiki/Trident_(layout_engine)
Related
I am having a real serious trouble using custom face in internet explorer.
I am using a specific font now, with font-face, and it working perfectly fine in modern browser, but i just cannot get it to work in IE.
The method I am using the font in Chrome, Firefox, etc. is the following:
font-family: xy;
src: url(fonts/xy.otf);
}
Is there a way that IE use another font?
font-family: xy, iefont, sans; is not working, because font-typed is specified in a lot of css, and places,
* {font-family: xy, iefont, sans !important} is not working becasue it drops the "FontAwesome" family specified earlier.
What is the simpliest to format every text but only for IE?
IE specific CSS
For browser specific css files I would recommend:
Simple solution, just use this JS library and you can easily apply styles for every browser/os combination:
BrowserClass.js
With this you will get a class name on the body tag with the current name and version of the browser also with the used OS.
After include the file:
<script src="js/browserclass.js"></script>
For example on Windows 8.1 with the latest ie you will see:
<body class="ie ie11 win desktop">
And in your style file you can refer by:
(.sass styling)
body.ie
+declare-font-face('Open Sans Light', 'OpenSans-Light-webfont', 200)
Note:
Conditional Comments in IE only work for up to IE9!
SASS mixin
Or If u are using SASS, here's a good mixin:
// ---------------------
// Font Face Mixin
// ---------------------
=declare-font-face($font-family, $font-filename, $font-weight: normal, $font-style: normal, $font-stretch: normal)
#font-face
font-family: #{$font-family}
src: url("../fonts/#{$font-filename}.eot")
src: url("../fonts/#{$font-filename}.eot?#iefix") format("embedded-opentype"), url("../fonts/#{$font-filename}.svg##{$font-family}") format("svg"), url("../fonts/#{$font-filename}.woff") format("woff"), url("../fonts/#{$font-filename}.ttf") format("truetype")
font-weight: $font-weight
font-style: $font-style
font-stretch: $font-stretch
Usage:
+declare-font-face('Open Sans Light', 'OpenSans-Light-webfont', 200)
Internet explorer uses .eot font files. You can make this work even in IE8. You need to convert your otf fonts to woff, eot, ...
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
You can use http://www.fontsquirrel.com/ for example to generate these files.
You can make use of Conditional Comments in IE.
<!--[if IE]>
<style>
.myfontclass {
//your IE specific font here
}
</style>
<![endif]-->
Hope that helps!
I am using a custom font-family with following css rule:
#font-face {
font-family: 'matrix';
src: url('MaSGRgLn.eot');
src: url('MaSGRgLn.eot?#iefix') format('embedded-opentype'), url('MaSGRgLn.woff') format('woff'), url('MaSGRgLn.ttf') format('truetype'), url('MaSGRgLn.svg#MatrixScriptGr-RegularLin') format('svg');
font-weight: normal;
font-style: normal;
}
I have transformed my main font to all alternatives to be sure. Those work fine for all browsers except for ie < ie9. Is there sth i am missing or haven't paid attention to?
One important thing to note, based on my tests, is that the font-family name must match that what is inside the EOT file (viewable with hex-editor or if you have a matching TTF and Windows, the font preview will tell you).
IE8 does not display your font if the name differs, IE9 (even in IE8 mode) doesn't have this problem.
In your case, the SVG version has the name "MatrixScriptGr-RegularLin". Try using the same name in you CSS #font-face font-family definition.
I have a problem with #font-face fonts not loading in IE9. IE8 and below works perfect, as do every other browser I've tried.
This is my CSS (font squirrel syntax):
#font-face {
font-family: 'ssmicon';
src: url('ssmfont3.eot');
src: url('ssmfont3.eot?#iefix') format('embedded-opentype'),
url('ssmfont3.woff') format('woff'),
url('ssmfont.ttf') format('truetype'),
url('ssmfont.svg#svgssmfont') format('svg');
font-weight: normal;
font-style: normal;
}
All glyphs are in the basic latin range (I read somewhere that IE could have an issue otherwise) and at the same server (so no cross domain issue). I have set Access-Control-Allow-Origin to * just in case. Still no success (at least not according to http://netrenderer.com/. Unfortunately, I don't have access to an IE browser at the moment). Here is a page affected: http://xn--ssongsmat-v2a.nu/ssm/Test3
Any other ideas what specific requirements IE9/10 might have when it comes to web fonts?
This was a minification issue after all. Seems like IE9 and IE10 are very picky about line breaks being kept in some places, so font-face declarations have to be kept away from all minification.
Check the site:
http://tinyurl.com/caljnqb
I'm using font-face:
#font-face {
font-family: 'SegoeUI';
src: url('{site_url}themes/site_themes/agile_records/fonts/segoeui.eot?') format('eot'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeui.woff') format('woff'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeui.ttf') format('truetype'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeui.svg#SegoeUI2') format('svg');
font-style: normal;
font-weight: normal;
}
#font-face {
font-family: 'SegoeUIBold';
src: url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.eot?') format('eot'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.woff') format('woff'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.ttf') format('truetype'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.svg#SegoeUI3') format('svg');
font-style: normal;
font-weight: bold;
}
#font-face {
font-family: 'SegoeUIItalic';
src: url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.eot?') format('eot'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.woff') format('woff'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.ttf') format('truetype'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.svg#SegoeUI4') format('svg');
font-style: italic;
font-weight: normal;
}
And there is the problem with output in Firefox, Chrome and Opera browsers. Everything looks OK on IE. Font looks sharp. Why does it happens? Maybe I'm doing something wrong?
different browsers render fonts differently.
The solution I've used in the past is to re-arrange the order in which the fonts are supplied to the font face, based on which browser is rendering the page. Usually my problems are in the earlier versions of IE so I've used a separate style sheet that offered the .woff file before the ttf file. Because some browsers can only read certain font type files but can read both and stop looking after finding one that works. If you re-arrange them you may be able to use one that renders a bit better.
If you end up using separate css you can use the $_SERVER arrays http_user_agent property to set a font css based on the browser.
googles Droid font is a font that renders funny sometimes depending on the browser as well so researching that might help you find other approaches.
It seems that there are a few tricks in ordering properly each format
See for example
This is the Fontspring bulletproof syntax modified to serve the svg
first:
#font-face {
font-family: ‘MyWebFont’;
src: url(‘webfont.eot’);
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘webfont.svg#svgFontName’) format(‘svg’),
url(‘webfont.woff’) format(‘woff’),
url(‘webfont.ttf’) format(‘truetype’);
}
From http://www.fontspring.com/blog/smoother-web-font-rendering-chrome
You may also take care of using the proper mime type for WOFF font , as of http://www.w3.org/TR/WOFF/#appendix-b
application/font-woff
to ensure proper handling by the browser
For some reason, when I view this page in IE9, all of the #font-face fonts look way smaller than they should, and maybe like a different typeface too. As far as I can tell, everything about my syntax should be cooperating with IE9. Others have had trouble replicating the issue, so maybe it is something in my Windows font settings? Either way, if you want to try to replicate what I am seeing, I am running IE9 on Windows 7 64bit.
EDIT: I'm not sure if this is a problem with the page, or a problem with my browser. Either way, I need to get it fixed.
Looks the same for me in IE9 as other browsers, none are using the embedded font due to its different name (HelveticaMD vs the actual name in use in the CSS, Helvetica.)
It looks like your “wrong” screenshot is of a browser trying to actually use the embedded font, whereas the “right” screenshot is just the default font. If that's what you want, just get rid of the font embedding stuff.
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Usage Example:
#font-face {
font-family: MyFont;
src: url(http://mysite/fonts/MyFont.ttf)
format("embedded-opentype");
}
p {font-family: MyFont, serif;
}
.woff solves the problem in IE9. I've used .eot for chrome & firefox. And .woff for IE9. Now the 3 browsers are working fine and showing the same results. Following is the code in CSS. #font-face {font-family: 'cert_fonts'; src: url('../fonts/GoudyTrajan.eot') format('eot'); src: url('../fonts/GoudyTrajan.woff') format('woff'); font-weight: normal; font-style: normal;}