How to properly add '?i#efix' to a font path in rails? - css

Question

It is recommended to add ?#iefix to the end of .eot font paths to fix yet another IE erratic behaviour :
#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 */
}
Is it possible to do that using asset_path, but without an ugly + "?#iefix" hack ?

Answer 1

This is how I use it in my projects. Works great in all browsers. It is important to break it to two #font-face declarations.
My fonts.scss:
#font-face {
font-family: 'Webfont';
src: font_url('webfont.eot?') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Webfont';
src: font_url('webfont.woff') format('woff'),
font_url('webfont.ttf') format('truetype'),
font_url('webfont.svg#Webfont') format('svg');
font-weight: normal;
font-style: normal;
}
Please note that if you want to use the SASS helper font_url, you have to have your fonts placed under the assets/fonts directory.
From my experience adding just ? to the font path for >=IE8 instead of anything starting ?# works. But, as mentioned in the beginning, keep the #font-face declaration for IE separate. For the use in SASS helper, just place it at the end of the asset name. It does not break the helper processing.

Answer 2

It appears that asset_path already takes this into account. So:
asset_path 'webfont.eot?#iefix'
does work out-of-the-box ! My bad...

Answer 3

Please try this:
Important:
Please verify your font name is added correctly in all places.
And please verify whether all font face files are available.
Add in Production.rb:
config.host_path = "http://---site url--"
Add following in CSS:
#font-face {
font-family: 'Webfont';
src: url('<%= Rails.application.config.host_path %>/assets/fonts/Webfont.eot');
src: url('<%= Rails.application.config.host_path %>/assets/fonts/Webfont.eot?#iefix') format('embedded-opentype'),
url('<%= Rails.application.config.host_path %>/assets/fonts/Webfont.woff') format('woff'),
url('<%= Rails.application.config.host_path %>/assets/fonts/Webfont.ttf') format('truetype'),
url('<%= Rails.application.config.host_path %>/assets/fonts/Webfont.svg#Webfont') format('svg');
font-weight: normal;
font-style: normal;
}
if you dont want hard coded font files path, then just use following in css.
#font-face {
font-family: 'Webfont';
src: url('Webfont.eot');
src: url('Webfont.eot?#iefix') format('embedded-opentype'),
url('Webfont.woff') format('woff'),
url('Webfont.ttf') format('truetype'),
url('Webfont.svg#Webfont') format('svg');
font-weight: normal;
font-style: normal;
}
We need to specify full URL path for access font files.
I hope it will help..