I have tried reading multiple articles on how to deal with custom fonts in IE, but they never seemed to work for me. I tried converting the fonts to EOT, but that didn't seem to work either. I am not sure what I am doing wrong, so I will post my code
#font-face {
font-family: "Klavika Regular";
src: url('../fonts/klavika.eot');
src: local('☺'), url('../fonts/klavika.woff') format('woff'), url('../fonts/klavika.ttf') format('truetype'), url('../fonts/klavika.svg') format('svg');
font-weight: normal;
font-style: normal;
}
this works in ie8/9
http://dev.bowdenweb.com/a/fonts/serif/alegreya/demo.html
#font-face {
font-family: 'AftaserifRegular';
src: url('AftaSerifThin-Regular-webfont.eot');
src: url('AftaSerifThin-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('AftaSerifThin-Regular-webfont.woff') format('woff'),
url('AftaSerifThin-Regular-webfont.ttf') format('truetype'),
url('AftaSerifThin-Regular-webfont.svg#AftaserifRegular') format('svg');
font-weight: normal;
font-style: normal;
}
if IE8 thinks it supports any other format other than eot of the ones listed below, then it will probably try to use that one. Maybe you could use a IE8 hack, like
src: local('☺'), url('../fonts/klavika.woff') format('woff'), url('../fonts/klavika.ttf') format('truetype'), url('../fonts/klavika.svg') format('svg');
src /*\**/: url('../fonts/klavika.eot')\9
so only IE8 will read the last src line and thus load the .eot.
Try three kinds of CSS Formats for #font-face on FontSquirrel Generator (in "EXPERT..." mode > in section "CSS Formats:" > "more information")
It's worth checking to see if your .htaccess file allows the file type.
Related
I used font-squirrel to generate web fonts and specify CSS declarations for the font, but it still uses the fallback fonts when I view the page in IE9 using IE7 or IE8 browser and document mode. Any idea what's going on? Here's my code (and a screenshot):
#font-face {
font-family: 'cubanoregular';
src: url('../fonts/cubano/cubano/../fonts/cubano/cubano-regular-webfont.woff-webfont.eot');
src: url('../fonts/cubano/cubano-regular-webfont.woff-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/cubano/cubano-regular-webfont.woff-webfont.woff') format('woff'),
url('../fonts/cubano/cubano-regular-webfont.woff-webfont.ttf') format('truetype'),
url('../fonts/cubano/cubano-regular-webfont.woff-webfont.svg#../fonts/cubano/cubanoregular') format('svg');
font-weight: normal;
font-style: normal;
}
.cubano { font-family: 'cubanoregular' }
If the code you put above is accurate, then the only problem is that your path to the eot file is incorrect:
src: url('../fonts/cubano/cubano/../fonts/cubano/cubano-regular-webfont.woff-webfont.eot');...
Fix that, and it should work fine. IE has supported #font-face since version 5 I believe, but in versions prior to 9 only eot is supported.
Nothing wrong with your code, the problem seems to be the font. But it's on Typekit if you want.
check your src path is correct
src: url('../fonts/cubano/cubano/../fonts/cubano/cubano-regular-webfont.woff-webfont.eot');
src: url('../fonts/cubano/cubano-regular-webfont.woff-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/cubano/cubano-regular-webfont.woff-webfont.woff') format('woff'),
url('../fonts/cubano/cubano-regular-webfont.woff-webfont.ttf') format('truetype'),
url('../fonts/cubano/cubano-regular-webfont.woff-webfont.svg#../fonts/cubano/cubanoregular') format('svg');
probably needs to be
src: url('../fonts/cubano/cubano-regular-webfont.woff-webfont.eot');
src: url('../fonts/cubano/cubano-regular-webfont.woff-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/cubano/cubano-regular-webfont.woff-webfont.woff') format('woff'),
url('../fonts/cubano/cubano-regular-webfont.woff-webfont.ttf') format('truetype'),
url('../fonts/cubano/cubano-regular-webfont.woff-webfont.svg#../fonts/cubano/cubanoregular') format('svg');
I rely heavily on Google Webfonts for my site and (unfortunatly) google chrome presents them badly, i have set font-smooth to always, but it dosen't seem to help.
EXAMPLES:
Is there any way i could smooth them / make them look better??
Thanks,
Font rendering problems are common in GChrome, try changing the order of your #font-face sources... Chrome utilises the .svg file in the #font-face sources, in some reason it doesn´t tolerate .svg being called last in the list
#font-face {
font-family: 'my-dirty-font';
src: url('../fonts/my-dirty-font.eot');
src: url('../fonts/my-dirty-font.eot?#iefix') format('eot'),
url('../fonts/my-dirty-font.woff') format('woff'),
url('../fonts/my-dirty-font.ttf') format('truetype'),
url('../fonts/my-dirty-font.svg') format('svg');
font-weight: normal;
font-style: normal;
}
If the order #font-face order looks similar then try changing to
#font-face {
font-family: 'my-dirty-font';
src: url('../fonts/my-dirty-font.eot');
src: url('../fonts/my-dirty-font.eot?#iefix') format('eot'),
url('../fonts/my-dirty-font.svg') format('svg');
url('../fonts/my-dirty-font.woff') format('woff'),
url('../fonts/my-dirty-font.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}
Personally I would use
http://www.fontsquirrel.com/
It's all hosted on your server and it's compatible with nearly every browser! Since using Font Squirrel I haven't looked elsewhere.
I have have "Gulim", a custom font, embedded into my website at mangodownload.com (you can see it on the homepage, if you see Arial, it does not work on your browser.)
Unfortunately, this font does NOT work on many browsers.
Here is my CSS for the font:
#font-face {
font-family: "Gulim";
src: url("/style/fonts/Gulim.ttf");
src: local("Gulim"), url("/style/fonts/Gulim.ttf") format("truetype");
}
Any ideas on achieving cross-browser support for ALL browsers?
PLEASE NOTE: I have tried converting the font, and tried FontSquirrel. I keep receiving the same message; 'font size too large'. My gulim.ttf file is 10mb.
#font-face {
font-family: 'yourfunkyfont';
src: url('fonts/yourfunkyfont.eot');
src: url('fonts/yourfunkyfont.svg') format('truetype'),
url('fonts/yourfunkyfont.eot?#iefix') format('embedded-opentype'),
url('fonts/yourfunkyfont.woff') format('woff'),
url('fonts/yourfunkyfont.ttf') format('truetype'),
url('fonts/yourfunkyfont.svg#yourfunkyfont') format('svg');
}
this will work only if you add the following MIME-types in your IIS (other webserver):
.woff - application/x-font-woff
.svg - application/x-font-woff
There is no way to do this cross-browser unless you can get your font in the various formats required by various browsers. The CSS to use is as follows:
#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');
}
As you can see, you need the font in eot, woff, ttf and svg formats.
Check the site:
http://tinyurl.com/caljnqb
I'm using font-face:
#font-face {
font-family: 'SegoeUI';
src: url('{site_url}themes/site_themes/agile_records/fonts/segoeui.eot?') format('eot'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeui.woff') format('woff'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeui.ttf') format('truetype'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeui.svg#SegoeUI2') format('svg');
font-style: normal;
font-weight: normal;
}
#font-face {
font-family: 'SegoeUIBold';
src: url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.eot?') format('eot'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.woff') format('woff'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.ttf') format('truetype'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.svg#SegoeUI3') format('svg');
font-style: normal;
font-weight: bold;
}
#font-face {
font-family: 'SegoeUIItalic';
src: url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.eot?') format('eot'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.woff') format('woff'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.ttf') format('truetype'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.svg#SegoeUI4') format('svg');
font-style: italic;
font-weight: normal;
}
And there is the problem with output in Firefox, Chrome and Opera browsers. Everything looks OK on IE. Font looks sharp. Why does it happens? Maybe I'm doing something wrong?
different browsers render fonts differently.
The solution I've used in the past is to re-arrange the order in which the fonts are supplied to the font face, based on which browser is rendering the page. Usually my problems are in the earlier versions of IE so I've used a separate style sheet that offered the .woff file before the ttf file. Because some browsers can only read certain font type files but can read both and stop looking after finding one that works. If you re-arrange them you may be able to use one that renders a bit better.
If you end up using separate css you can use the $_SERVER arrays http_user_agent property to set a font css based on the browser.
googles Droid font is a font that renders funny sometimes depending on the browser as well so researching that might help you find other approaches.
It seems that there are a few tricks in ordering properly each format
See for example
This is the Fontspring bulletproof syntax modified to serve the svg
first:
#font-face {
font-family: ‘MyWebFont’;
src: url(‘webfont.eot’);
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘webfont.svg#svgFontName’) format(‘svg’),
url(‘webfont.woff’) format(‘woff’),
url(‘webfont.ttf’) format(‘truetype’);
}
From http://www.fontspring.com/blog/smoother-web-font-rendering-chrome
You may also take care of using the proper mime type for WOFF font , as of http://www.w3.org/TR/WOFF/#appendix-b
application/font-woff
to ensure proper handling by the browser
I'm having trouble using the following #font-face declaration to work with my Rails 3.1 app. I put the fonts in the Asset Pipeline in its own folder called "Fonts" alongside images and stylesheets and javascripts
Here is the declaration I used (generated by Font Squirrel.)
#font-face {
font-family: 'ChunkFiveRegular';
src: url('Chunkfive-webfont.eot');
src: url('Chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
url('Chunkfive-webfont.woff') format('woff'),
url('Chunkfive-webfont.ttf') format('truetype'),
url('Chunkfive-webfont.svg#ChunkFiveRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Anyone successfully utilize #font-face on their Rails 3.1 app?
Update
I just read this thread http://spin.atomicobject.com/2011/09/26/serving-fonts-in-rails-3-1/ that said to change url to font-url in the declarations. That didn't seem to work either unfortunately.
You have to add the folder to the assets path (to file config/application.rb), see Rails Guides
config.assets.paths << "#{Rails.root}/app/assets/fonts"
And you should use the asset_path helper:
src: url('<%= asset_path('Chunkfive-webfont.eot') %>');
I know this is an old question, but I just stumbled across this issue with rails 3.2, and after reading the link to the documentation posted previously, there was no need to edit the application.rb. All I needed to do was do the following in my stylesheet (using sass)
#font-face {
font: {
family: 'Junction';
weight: 'normal';
style: 'normal';
}
src: asset-url('Junction-webfont.eot', font);
src: asset-url('Junction-webfont.eot', font) format('embedded-opentype'),
asset-url('Junction-webfont.woff', font) format('woff'),
asset-url('Junction-webfont.ttf', font) format('truetype'),
asset-url('Junction-webfont.svg#JunctionRegular', font) format('svg')
}
So instead of using url, I used the generic asset-url, which takes 2 arguments, the file and the asset class, in this case 'font'.
From Rails 3.1 and above you can call font-url directly. Like this:
#font-face {
font-family: 'ChunkFiveRegular';
src: font-url('Chunkfive-webfont.eot');
src: font-url('Chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
font-url('Chunkfive-webfont.woff') format('woff'),
font-url('Chunkfive-webfont.ttf') format('truetype'),
font-url('Chunkfive-webfont.svg#ChunkFiveRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Expect your final css to look like that:
#font-face {
font-family: 'ChunkFiveRegular';
src: url(/assets/Chunkfive-webfont.eot);
src: url(/assets/Chunkfive-webfont.eot?#iefix) format('embedded-opentype'),
url(/assets/Chunkfive-webfont.woff) format('woff'),
url(/assets/Chunkfive-webfont.ttf) format('truetype'),
url(/assets/Chunkfive-webfont.svg#ChunkFiveRegular) format('svg');
font-weight: normal;
font-style: normal;
}
Usually works :)
Using Rails 4.0 (don't know if this is specific to 4, but anyway), I was only able to make it work with url(font_path('font-name.ttf')). Adding the fonts path to the assets path was not necessary either (config.assets.paths << "#{Rails.root}/app/assets/fonts").
So, to me this is what worked:
#font-face {
font-family: 'ChunkFiveRegular';
src: url(font_path('Chunkfive-webfont.eot'));
src: url(font_path('Chunkfive-webfont.eot?#iefix')) format('embedded-opentype'),
url(font_path('Chunkfive-webfont.woff')) format('woff'),
url(font_path('Chunkfive-webfont.ttf')) format('truetype'),
url(font_path('Chunkfive-webfont.svg#ChunkFiveRegular')) format('svg');
font-weight: normal;
font-style: normal;
}
I just updated that article on Atomic Object's Spin blog. Here is the CSS converted (You were looking at the Sass syntax)
#font-face {
font-family: "Merriweather";
src: url(/assets/merriweather-black-webfont.eot);
src: local("Merriweather Heavy"), local("Merriweather-Heavy"), url(/assets/merriweather-black-webfont.eot?#iefix) format("embedded-opentype"), url(/assets/merriweather-black-webfont.woff) format("woff"), url(/assets/merriweather-black-webfont.ttf) format("truetype"), url(/assets/merriweather-black-webfont.svg#MerriweatherHeavy) format("svg");
font-weight: 900;
font-style: normal;
}
I'm using 3.1.1 and have my fonts under vendor/assets/store (Spree implementation). The solutions given here did not work for me and I eventually just tried what ended up being my solution - there was no need for
Here's an example of my src attribute for EOT:
src: url('1617A5_4.eot');
I'm a little bit confused by this but it seems like once assets are compiled the assets are all copied in to their parent folder (assets/store/) at which point the stylesheet can just pick them up.
While this is late, you could use Compass's +font-face mix-in to avoid all this trouble. The mixin helps your life easier by
Not remember the awful caveats of the traditional font-face decleration
It internally handles url_helper and format declarations for you
It's far easier to remember
It is declared the following way madams and gentlemen:
+font-face("#{$font-name}",
font-files("#{$font-name}.woff", woff,
"#{$fontFileName}.ttf", ttf,
"#{$fontFileName}.svg", svg), "#{$fontFileName}.eot", normal, normal);