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
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 can't make IE 8 and below (need preferably upto IE 6) render a font I have on my server.
The code I'm using is the following:
#font-face {
font-family:omnes;
src:url('fonts/Omnes-Regular.eot') format('eot'),
url('fonts/Omnes-Regular.otf') format('otf'),
url('fonts/Omnes-Regular.ttf') format('truetype');
}
This seems to work for all other browsers, how can I approach this?
You can see a live demo here:
http://trufavarela.com/uruware/
Try this:
#font-face {
font-family: 'omnes';
src: url('fonts/Omnes-Regular.eot');
src: url('fonts/Omnes-Regular.eot?#iefix') format('embedded-opentype'),
url('fonts/Omnes-Regular.ttf') format('truetype');
}
You probably do not need otf file format. This code is likely to work, because when IE tries getting anything other, than the eot format, the ? simply makes it think the rest of the string is a parameter, as in a php file.
Also, you should probably include woff and svg formats of the font as well. And use Font Squirrel, does all the job for you.
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
Lots of articles in the web like this : http://www.fontspring.com/blog/fixing-ie9-font-face-problems suggest to add a ?#iefixto the eot url. I was curious to know how is this going to solve the problem. Thanks.
IE8 and the older have a bug in their parsers for the src attribute. So if you include more than 1 font format in the SRC, IE fails to load it and reports a 404 error.
The question mark solves that problem as it fools IE into thinking the rest of the string (other src) is a query string, and therefore loading just the EOT file...
Other browsers will follow the specification and load just their required font type ...
You may wanna read Paul Irish's Bulletproof #font-face syntax to know more about some other of the why's ...
You could do anything instead of ?#iefix: The basic objective is to put a ?#somethingafter the first font file in the URL as #Rexyz has already answered.
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#FooAnything') 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 */
}
Fully realising this is an old question.
But for those who came here looking for what version of "that" browser needed this hack, it's safe now to remove if you don't support IE<10.
So just get rid of it and have just one line enumerating all fonts in all formats you offer.
The ?#iefix is there to stop the browser interpreting any characters after the ? as a query string and therefore prevents another possible server error.
As described above, I have issues with #font-face not displaying in IE9 although it displays fine in every other browser including IE8 and under. Additionally, when viewing locally on my computer, IE9 does display the font, just not when fully live.
The site is:
bigwavedesign.co.uk/gcc/gcc/
The code used is:
#font-face {
font-family: 'LeagueGothicRegular';
src: url('league_gothic_0-webfont.eot');
src: local('League Gothic Regular'), url('league_gothic_0-webfont.woff') format('woff'), url('league_gothic_0-webfont.ttf') format('truetype'), url('league_gothic_0-webfont.svg#webfonta36nFpyE') format('svg');font-weight: normal;font-style: normal;
}
Anyone any ideas why this might be occurring?
Cheers!
=============================================
EDIT
I have found the following site that displays the same font ok in IE9, anyine any ideas how he did that?
http://iamthomasbishop.com/
No answer, just confirmation: I have a similar kind of problem. Font works in all other IE versions except IE9, both using IETester and original browser. When changing Document Mode (F12 dev tools) font works. Not how I'd like it though.
Update: With some trickery I managed to get it working. Seems like IE9 is using the .woff version of the font (which I had excluded) over the .eot that I thought it would. I used the #font-face generator from fontsquirrel to get all the different font variations and included them in my project, using the smileyface-local. Did not have to alter my .htaccess file. Now works fine and looks the same in all IE versions:
#font-face {
font-family: "LucidaFax-bold";
src: url("_font/LucidaFax-bold.eot");
src: local("☺"),
url("_font/LucidaFax-bold.woff") format("woff"),
url("_font/LucidaFax-bold.ttf") format("truetype"),
url("_font/LucidaFax-bold.svg#LucidaFax-bold") format("svg");
}
h1 { font-family: "LucidaFax-bold", serif;}
(I even got mad fresh using Mark "Tarquin" Wilton-Jones' text-shadow hack, applying same look to IE versions as rest of the browser world. Old school? Looks great! Was it worth it? Well, learned a lot. ;)
I have just had the very same problem with Web Fonts hosted on an IIS7 site, as suggested by Grillz the issue was down to MIME Types.
I have elected to use "application/octet-stream" based upon the answers to the Mime type for WOFF question.
Open IIS and select the site that hosts the fonts (must be the same domain name for IE9 and Firefox)
Double click "Mime Types"
Click "Add..." in the top right hand corner.
In "File name extension:" enter ".woff"
In "MIME type:" enter "application/octet-stream"
Hope that saves someone 10 minutes in the future.
For us the trick was to just change the format on the .eot files we're serving up.
Works in IE6-9, Firefox 3-4, Chrome, Safari, Android, iPhone.
#font-face {
font-family: 'Museo';
src: url('/ui/museo300.eot?') format('eot'),
url('/ui/museo300.ttf') format('truetype')
}
Becomes:
#font-face {
font-family: 'Museo';
src: url('/ui/museo300.eot?') format('embedded-opentype'),
url('/ui/museo300.ttf') format('truetype')
}
My solution is to declare two different fonts:
#font-face {
font-family: "Dereza bold";
src: local("Dereza bold"), url("../../assets/otf/dereza_bold.otf") format("opentype");
}
#font-face {
font-family: "IE Dereza bold";
src: url("../../assets/eot/dereza_bold.eot");
}
And then:
.divclass {
font-family: "Dereza bold", "IE Dereza bold";
}
Abalore +1
My solution:
#font-face {
font-family: "OfficinaSansBookSCC";
src: url('font/OfficinaSansBookSCC.eot');
src: url('font/OfficinaSansBookSCC.eot') format('embedded-opentype'),
url( 'font/OfficinaSansBookSCC.ttf' ) format("truetype");
}
working in IE 7-9, chrome, opera, firefox.
first line needed for IE 9, second for IE 7-8.
Well since you've edited your post the below text won't be the answer. Are you pointing to the correct directory? Any chance of this being a mime type issue from the server?
====================================================
This might be it:
It’s important to note that your site must render in documentMode 9 in order to take advantage of the new features included with IE9 (that includes all new features in IE9, not only the ones related to web fonts). If you haven’t heard of documentMode before, Microsoft has put together a guide which explains what it is and how you can use it on your site.
from http://blog.typekit.com/2010/09/03/typekit-adds-experimental-support-for-ie9/
In IE9 - F12 look at the debug screen see if there are any CSS3117 errors.
See also: IE9 blocks download of cross-origin web font
Font Squirrel also provides a wonderful generator tool to help you create a font kit that will include the required formats, already-written CSS, and even a demo page to see how it's all used, along with help with problems you may encounter.
It was a breeze to incorporate its output into my site and it did fix the problem perfectly.
You should check out this blog post Paul Irish has a few things to say about the problems you are coming across and he comes up with what he calls a 'bulletproof' #font-face statement.
http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
http://www.fontsquirrel.com uses this for its sample CSS which worked OK for the project I was working on.
#font-face {
font-family: 'QuicksandBook';
src: url('/Quicksand_Book-webfont.eot');
src: url('/Quicksand_Book-webfont.eot?#iefix') format('embedded-opentype'),
url('/Quicksand_Book-webfont.woff') format('woff'),
url('/Quicksand_Book-webfont.ttf') format('truetype'),
url('/Quicksand_Book-webfont.svg#QuicksandBook') format('svg');
font-weight: normal;
font-style: normal;
}
I had this problem. Turns out I was missing a comma in the font-family declaration.
I wanted to add yet another thing that could possibly go wrong in this scenario. IE9 has a rule that discards all #font-face declarations that can not be cached after the first load. IE9 will actually use the font correctly on the first display, but on subsequent refreshes, the #font-face will be disabled. I discovered this after closing my browser by chance, and then reopening it to find that my font was working mysteriously, only to stop working one refresh later.
To fix this, you simple need to make sure that the request serving your font has a Cache-Control response header of something other than no-cache. I would recommend setting it to max-age=3600. This will ensure your font is cached for an hour. IE9 will then be able to display your font consistently.