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.
Related
Before marking this as duplicate please read through my doubts. I searched thoroughly on the web(particularly stackoverflow) & couldn't get the doubts cleared. This question may seem lengthy at a glance but it contains crucial issues which others also want to know.
I'm trying to gain a slightly deep knowledge in the bulletproof #font-face rule and the people out there are confusing me. Please suggest me on this guys.
So, here's the latest bulletproof code as suggested by Font-Spring (http://blog.fontspring.com/2011/02/further-hardening-of-the-bulletproof-syntax/) along with the IE9 compatibility mode issue solved:
#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 */
}
The one without the IE9 Compatibility Mode Fix, also by Font-Spring(http://blog.fontspring.com/2011/02/the-new-bulletproof-font-face-syntax/), looks like this:
#font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
Currently, I'm reading a book "The Book Of CSS3" by Peter Gasston.
It follows the bulletproof rule with IE9 Compatibility Mode fix as stated by the Font-Spring. He says that the rule with a query string ? in the second src property is responsible for IE9 Compat. Mode fix. But, font-spring holds the first src property responsible for IE9 Compat. Mode fix. I'm not able to learn this syntax without understanding it completely.
My serious issues are rather smaller. First of all I wanna know if only the ?#iefix can prevent the parsing error or it could be something like ?iefix (without #) or it could be ?xyz or ?#abc. Is it necessary to write exactly ?#iefix?
Secondly,
I can't feel how this #font-face rule gets parsed, how
IE8 decides which of the src
properties is to be used for eot font. And if IE9 has no issues with parsing even in the
compatibility mode, how will it decide which font-format to use? Will
the IE9 in compatibility mode break on query string font url & if not
then why not?
Can somebody tell me if I look at the whole bulletproof rule stated
above, how IE8, IE9 in compatibility mode, IE9 in normal mode & other
browsers will parse it? How will a browser decide from several fonts which one to use if it supports majority of them. What is the order in which the browser looks url values and src properties?
Is it like that an alone src property without any local() and
format() values and with a correct eot format will be accepted by IE8 and it will not go further
to the next src property in which other formats are defined? Or will it still go to the next src
property & download fonts from there?
If there will be a query string (?) in the next src property,
will IE8 (IE9 in compatibility mode considered as well) download the eot font two times? And if there will be no
query string, then will it accept the eot font from first property
and won't break or will it break & don't apply any custom defined
font even from the first src property?
Also, does IE9 in normal mode support eot format?
Won't the bulletproof syntax still work if I just remove the whole query string declaration like:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE6-IE8 as well as IE9 Compat. Mode */
src: url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Won't the above still work in all the possible cases? IE6-8 will have the first src along with the IE9 in compatibility mode and all other browsers will follow the rest of rules.
Would the above rule suggested by me work same with the local() value as follows:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE6-IE8 & IE9 Compat. Mode */
src: local('MyWebFont'), /* To fix IE6-IE8 and IE9 Compat. Mode */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Whether in IE8 or in IE9 compatibility mode, local() value will make them go away.. Would IE9 in normal mode use eot or woff from above rule?? If it does use eot, can we make a slight change to first src property like this:
src: url('webfont.eot?#iefix') format('eot');
IE9 will ignore this property as it contains eot and move on further to use woff, am I right? Also, if I again make a change to this rule itself like this:
src: url('webfont.eot?#iefix') format('embedded-opentype');
Would IE9 now use eot format or still go on with woff?
This is all I want to know and yes I think these questions definitely need an answer.
#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 */
}
This is simply a trick to workaround the various IE* inconsistencies, with the first src you satisfy IE9, so if your viewer has this browser he gets this font, the second src doesn't overwrite the first one because IE9 isn't able to parse the 'webfont.eot?#iefix' string
About the second src of the rule: that is the "old" bulletproof syntax and you are already familiar with it. Please note that, as said in the blog post of Fontspring about the hardened rule, Microsoft fixed the bug in IE9 when using IE7 and IE8 render modes but they didn't actually fixed IE7 and IE8 so you still need this trick for these browsers.
A clarification about local(): this tell to the browser to use a certain local (i.e. on the pc of the viewer of the page) available font, if your viewer doesn't have it installed then he'll not be able to see the right font, for more info about this you can check this: http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/#smiley
I posted about this issue with a client's site previously but I was unable to explain it thoroughly or properly. I'm going to re-iterate my issue in hopes that somebody can assist me with a solution.
I have a WordPress site using the Jupiter theme and Masterkey framework and through that, I am loading Google Fonts. My navigation is set to use the font Cinzel and it loads perfectly fine on every page except for a few.
Here is a link to a page that it works on:
http://plainfoundation.com/hall-of-distinction/
Here is a link to a page that it does not work on:
http://plainfoundation.com/contact/
From my examination using the developer tools provided by Google Chrome and the add-on Firebug for Mozilla Firefox, the code is exactly the same and no issues are appearing in the console. Maybe somebody has an idea and can help with this? Thanks!
Viewing your source, I see you have #font-face .ttf only, but not any of the other formats required for all browsers. You should make sure you have all these described on this css-tricks post.
Also you seem to be adding this in your header styles. You should make sure this #font-face is declared before other styles load. To ensure that, either place it at the top of your first stylesheet or in a new 'myfonts.css' file and enqueue it in your functions file before other stylesheets:
Here are the formats required:
#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 */
}
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.
When using font-face i have allways been wondering if it is really necessary to add the part about format for example 'format('eot')'? It seems like declaring the format twice and a waste of time and code.
Do anyone have a good explanation why it is done this way? And if it is ok just leave it out?
#font-face {
font-family: 'Font_name';
src: url('Font_name.eot?') format('eot'), url('Font_name.woff') format('woff'), url('Font_name.ttf') format('truetype');
}
The format(...) part is, by definition, the part that declares the font format. Whatever the url(...) part contains is just a URL, a string used to access a resource. In practice browsers may, in the absence of properly declared information, try to guess the content type of a resource from the last few characters of the URL used to access it, but this is not a good excuse for not writing proper declarations.
The definition of the src descriptor says:
External references consist of a URL, followed by an optional hint
describing the format of the font resource referenced by that URL. The
format hint contains a comma-separated list of format strings that
denote well-known font formats. Conformant user agents must skip
downloading a font resource if the format hints indicate only
unsupported or unknown font formats. If no format hints are supplied,
the user agent should download the font resource.
So if you omit the format(...) part, browsers will download the font resource—they are not expected to analyze the URL before doing that. This may mean considerable inefficiency, since browsers will download resources they cannot handle; only after downloading, say, an EOT font resource will they look at its content and see they cannot handle it and must download the next resource in the list.
eot embedded-opentype format is basically used for IE Browser.
So this is the rule to target the older version of IE Browser. All latest browser have support for woff font format.
Here is the CSS Rule if using custom font for web.
#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 */
}
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