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
Related
I know this was asked multiple times, but I couldn't get it to work after trying them. This is the simple CSS I am using to import a custom font. Also, I am using this with bootstrap.
#font-face {
font-family: Montserrat-Black;
src: url(Montserrat-Black.otf);
}
It's not working in IE11 itself. Please help me out. Thank you.
Internet explorer use eot format (legacy) or woff.
See MSDN
Anyway i use this code for maximum compatibility:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Try using .eot file format for Internet Explorer. Something like:
#font-face {
font-family: Montserrat-Black;
src: url('Montserrat-Black.eot');
src: url('Montserrat-Black.otf');
}
IE11:
If you are receiving the CSS3114 error code in dev tools, you need to modify the first bits of the font file. This will allow IE to install the font.
Npm Module:
You can use ttembed-js npm module, which will make the modifications for you.
https://www.npmjs.com/package/ttembed-js
Usage: ttembed-js path/to/Montserrat-Black.otf
If you're having this issue and your application is running on IIS, try to add the correct MIME-types in your web.config, as SO-user Martin Buberl explained in this comment
Since this question was the first hit in my search, let me offer the solution I found:
Paul Irish's Bulletproof #font-face Syntax
Or just use the generator at FontSquirrel.com http://www.fontsquirrel.com/fontface/generator They also provide the "one CSS syntax to rule them all" in the font-kit that they create.
I'm using a TTF and OTF web font to catch all major browsers(FireFox, Chrome and IE11) on most devices. It all looks fine, before relocation to the production server and then IE doesn't want to show my icons.
I guess, the brains in Redmond have some kind of feature to stop this working over the Internet, so it works from localhost only.
What's the deal here? What kind of font type do I need to use for IE?
This is the standard way of loading with #font-face, hacky fixes and all -
#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 */
}
hey please check the Compatibility tables for support of EOT, check these links -
Link 1
Link 2
Be aware of one thing:
Fonts won't work in IE if the font-family entry in css is named differently than the font name!
This bug took me all day to figure out and can be very frustrating if you are not aware of it!
For IE 6-11, use EOT fonts, but be aware it is not supported by any other browser.
For IE >=9 & all other browsers, use woff fonts, as it has the widest support and the best compression, since it was designed specifically for the web.
as such:
#font-face {
font-family: 'FontName';
src: url('FontName.eot'); /* IE 9 - 11 */
src: url('FontName.eot?#iefix') format('embedded-opentype'), /* IE Fix for IE 6-8*/
url('FontName.woff') format('woff'); /* IE 9-11 & All Modern Browsers */
}
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'm having some issues with the font-face property. This code works in every browser, even IE8 and lower, but I cannot get it to fire off in IE9 or 10. I've scanned this board and google and have found a bunch of solutions, but nothing seems to wanna work for me. Here is my code:
#font-face {
font-family: din_light;
src: url('din_light.ttf?') format('truetype'),
url('din_light.eot');
}
Does anyone see anything wrong here..?
Researching others with similar issues, it seems to be that IE 9 likes to utilize the WOFF version of the font, even if you specify the EOT in another source URL like you have (when using multiple sources at once). Try the following code and let me know how it goes:
#font-face {
font-family: 'din_light';
src: url('din_light.eot'); /* IE9 Compat Modes */
src: url('din_light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('din_light.woff') format('woff'), /* Modern Browsers */
url('din_light.ttf') format('truetype'), /* Safari, Android, iOS */
url('din_light.svg#svgFontName') format('svg'); /* Legacy iOS */
}
If you don't have the other font types you can get them from webfont-generator (fontsquirrel)
Code above was found here: Fixing IE 9 #font-face problems
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;}