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!
Related
I'm using the following code in my css:
#font-face {
font-family: "rsfont";
src: url("rsfont.ttf");
}
body {
font-family: 'rsfont';
}
I have a rsfont.ttf file in the same folder as my css file, but it just doesn't work. Why?
.ttf font works in Safari, Android, iOS. To make the font work in all browsers you need to make more font formats using a fontface generator. You can use the one on fontsquirrel
Your final #fontface declarations should be something like this to work in all browsers supporting the #fontface
#font-face {
font-family: 'rsfont';
src: url('rsfont.eot'); /* IE9 Compat Modes */
src: url('rsfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('rsfont.woff') format('woff'), /* Modern Browsers */
url('rsfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('rsfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
You could try to change it to the following
#font-face {
font-family: "rsfont";
src: url('rsfont.ttf') format('truetype');
}
However, not all browsers support the same filetypes! You'd need to convert it to multiple files using something like FontSquirrel. You can check a compatibility matrix here: https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face
You need to specify a format and for full cross browser support you should add a woff and eot. The following code will support all browsers (as long as you have the right font files)
For all modern browsers you really only need an eot and woof file.
#font-face{
font-family:rsfont;
src:url(rsfont.eot);
src:url(rsfont.eot) format("embedded-opentype"),
url(rsfont.woff) format("woff"),
url(rsfont.ttf) format("truetype")
font-weight:400;
font-style:normal
}
I have put below font face in my CSS.
#font-face {
font-family: 'sfnt';
src: url('../sfnt.eot'); /* IE9 Compat Modes */
src: url('../sfnt.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../sfnt.woff') format('woff'), /* Modern Browsers */
url('../sfnt.ttf') format('truetype'); /* Safari, Android, iOS */
font-weight: normal;
font-style: normal;
}
If I try to open my web page in any of the version of IE it does not load my font files.
It works fine with Chrome, safari, Firefox.
I searched the similar questions logged in Stack Overflow and tried all the possible solution. Nothing seems to work.
Please let me know what is going wrong.
Thanks
If you try to access the url of the .eot font directly i.e http:///sfnt.eot what happens?
You can try to use Google Fonts, It's better to compatibility and you can use google cdn. If you can't find your font, you may try to use the syntax of then.
#font-face {
font-family: 'Wellfleet';
font-style: normal;
font-weight: 400;
src: local('Wellfleet'), local('Wellfleet-Regular'), url(http://themes.googleusercontent.com/static/fonts/wellfleet/v1/qu15OBOh_Q0T8ooRUaKSDT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
The Google Fonts API is compatible with the following browsers:
Google Chrome: version 4.249.4+
Mozilla Firefox: version: 3.5+
Apple Safari: version 3.1+
Opera: version 10.5+
Microsoft Internet Explorer: version 6+
via https://developers.google.com/fonts/faq
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)
I'm trying to embed a font, the problem is that it is just displayed in Firefox but not with Internet Explorer.
#font-face {
font-family: capture_it;
src: url('fonts/Capture_it.eot');
src: local('Comfortaa_it'),
url('fonts/Capture_it.ttf') format('truetype');
}
Any help is very appreciated.
Thanks,
enne
Font-face syntax is tricky, particularly with IE. Please use the one we developed here, which is cross-browser tested. http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
It looks like this:
#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 */
}
Different browsers support different font formats. You can generate all formats for optimal crossbrowser support with http://www.fontsquirrel.com/fontface/generator.
The following is from the table found on the url included above:
TTF: Raw TrueType file, designed to look good on-screen.
EOT Lite: EOTs are only supported by Internet Explorer. This EOT type is uncompressed and is the same filesize as a TTF.
EOT Compressed: EOT compressed with LZ compression. File sizes are often smaller than WOFF.
WOFF: Cross-browser, web-only font format that uses gzip compression. IE9+, FF3.6+, Chrome 5+
SVG: This is an XML format required by iOS devices before version 4.2.
SVGZ: This is gzipped version of SVG.
Personally I'd use Google Fonts. If you can find one close enough to the one you want to use they're a really easy, quick and cross browser font solution. Moving away from Cufon to Google Fonts was a fantastic idea.
Well worth a look - http://www.google.com/webfonts#ChoosePlace:select
not exactly but close:
<style type="text/css">
#font-face {
font-family: MyWebFont;
src: url("font.eot") /* EOT file for IE (tested with ie8 and ie9)*/
}
#font-face {
font-family: MyWebFont;
src: url("font.ttf") /* TTF file for CSS3 browsers */
}
</style>
and make the eot file from: http://www.kirsle.net/wizards/ttf2eot.cgi
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;}