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
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 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'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'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
I'm sure I'm not the only one that this has plagued, but I can't seem to find a solution.
#font-face works wonderfully in Firefox, Chrome, Safari with TTF fonts.
as so:
#font-face{
font-family: "Apple-Chancery" ;
src: url(images/Apple-Chancery.ttf ) format("truetype");
}
However, I understand that to be used in Microsoft, the font has to be in EOT format, so I converted it using http://ttf2eot.sebastiankippe.com/
And my code looks like this:
#font-face{
font-family: "Apple-Chancery" ;
src: local("Apple Chancery"), url(images/Apple-Chancery.eot), url(images/Apple-Chancery.ttf ) format("truetype"); /* non-IE */
}
but it's not working in Internet Explorer. I've tried putting two difference lines for src: I've tried using a different converter, different font, and all no go. I'm using IE8.
Also, to use multiple custom fonts, do I need multiple #font-face blocks or I use line them up font-family, src, font-family, src, etc.?
How about using font squirrel to generate all your files and your code?
This may help you,
#font-face {
font-family:"Apple-Chancery";
src: url('../font/Apple-Chancery.eot'); /* IE9 Compat Modes */
src: url('../font/Apple-Chancery.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../font/Apple-Chancery.woff') format('woff'), /* Modern Browsers */
url('../font/Apple-Chancery.ttf') format('truetype'), /* Safari, Android, iOS */
url('../font/Apple-Chancery.svg#svgFontName') format('svg'); /* Legacy iOS */
font-weight:bold;
font-style:normal;
}
This page may be useful to you: http://msdn.microsoft.com/en-us/library/ms530757%28VS.85%29.aspx
In particular, this line:
In Internet Explorer 8 and earlier versions, only one URL value is supported.
I think what you're trying to do may not work right until IE9 is available. It'd be worth getting a copy of the beta (assuming you're running something newer than Windows XP) to test and confirm this.
You need to put the IE (eot) one on a separate line, before the other ones.
The correct declaration is:
#font-face{
font-family: "Apple-Chancery" ;
src: url(images/Apple-Chancery.eot); /* IE */
src: local("Apple Chancery"), url(images/Apple-Chancery.ttf ) format("truetype"); /* non-IE */
}
But that's probably not enough to cover all the cases, you're missing svg font type for older chromes, etc.. I'd recommend using the font-face generator from fontsquirel.com, choose the Easy option then check out the generate css file and copy/paste the code and converted font files
I second the use of Font Squirrel.
You could also take a look at my post Adventures with #font-face which might help you.
Simpy upload your font on font2web it creates a css file and a demo HTML file.
Hope this help you