Are .eot fonts supported via #font-face datauri on IE8?
Are datauris on IE8 supported only for images?
I know about the 32KB limitation. My base64 representation of the .eot font does not exceed this limit.
My css declaration goes something like this:
#font-face {
font-family: 'MyFont';
src: url(data:font/opentype;base64,B1QAAB9TAAACAAI.....);
font-weight: normal;
font-style: normal;
}
Data URIs should not be any issue for this...
...It should work, I have my .eot web font that works in all browsers (even IE7) by using this...but I also use WOFF/TTF/SVG also to support the rest of the browsers
#font-face {font-family: 'AllyourBase';
src: url('/fonts/allyourbase.eot');
src: url('/fonts/allyourbase.eot?#iefix') format('embedded-opentype'),
url('/fonts/allyourbase.woff') format('woff'),
url('/fonts/allyourbase.ttf') format('truetype'),
url('/fonts/allyourbase.svg?#allyourbase') format('svg');
font-weight: normal;
font-style: normal;
}
Make sure IIS has the correct mime type on your local/web server (EX: application/vnd.ms-fontobject for .eot files).
Lastly....I doubt Datauri is the cause but to play it safe try without data/base64 and see if it does anything
Related
I've been supplied an OTF font from a client and not following the web font trends for a while now in terms of support, if I remember correctly, the pattern used for cross browser support for web fonts would look like this:
#font-face {
font-family: 'AvalonBook';
src: url('Avalon-Book-webfont.eot');
src: url('Avalon-Book-webfont.eot?#iefix') format('embedded-opentype'),
url('Avalon-Book-webfont.woff') format('woff'),
url('Avalon-Book-webfont.ttf') format('truetype'),
url('Avalon-Book-webfont.svg#AvalonBook') format('svg');
font-weight: normal;
font-style: normal;
}
Probably because I've been so used to copying and pasting the above code and modifying it to my needs, I haven't got the chance to actually understand the reasons behind this pattern.
This begs the question, is OTF even supported in the browsers? What browsers and versions? Also why is it not in the above #font-face declaration if it is supported?
Thanks.
I use fontsquirrel's CSS for #font-face:
#font-face {
font-family: 'pf_agora_serif_promedium';
src: url('pfagoraserifpro-medium-webfont.eot');
src: url('pfagoraserifpro-medium-webfont.eot?#iefix') format('embedded-opentype'),
url('pfagoraserifpro-medium-webfont.woff') format('woff'),
url('pfagoraserifpro-medium-webfont.ttf') format('truetype'),
url('pfagoraserifpro-medium-webfont.svg#pf_agora_serif_promedium') format('svg');
font-weight: normal;
font-style: normal;
}
It works correctly in all browsers if
a)I use fonts that fontsquirrel generated.
b)I don't use cyrilic charset or another characters that could be on my font file but fontsquirrel does not converting at all (like russian letters ЯЩЮИГЛЬЦЫЧ)
So, when I changed my font files on my directory to another (which contain russian letters) IE9 and lesser don't show my font at all, even if I use only latin charset, but it works correctly (with latin and cyrilic charset) in normal browsers. So what's wrong. Does the problem inside of font files? And if not, why font-face don't working when I changing only font files?
p.s. I'd tried to use another CSS for font-face but they didn't work at my web-site.
i think fonts path is not giving you,
Please check fonts local path, may i sure working in all browser this #font-face kit,
EOT fortmat for ie8 and ie 9
#font-face {
font-family: "pf_agora_serif_promedium";
src: url("yourlocalpath/pfagoraserifpro-medium-webfont.eot");
src: local("☺"),
url("yourlocalpath/pfagoraserifpro-medium-webfont.woff") format("woff"),
url("yourlocalpath/pfagoraserifpro-medium-webfont.ttf") format("truetype"),
url("yourlocalpath/pfagoraserifpro-medium-webfont.svg#LucidaFax-bold") format("svg");
}
Is there any free and offline font converter which can convert
.ttf(truetype) format to
.eot
.woff
.svg
Want to use in #font-face likes,
#font-face {
font-family: 'MyFontFace';
src: url('fonts/MyFont.eot');
src: local('☺'), url('fonts/MyFont.woff') format('woff'),
url('fonts/MyFont.ttf') format('truetype'), url('fonts/MyFont.svg')
format('svg');
font-weight: normal;
font-style: normal;
}
If you have fontforge you can use it convert ttf to svg and woff. ttf2eot tool can convert to eot. These two are offline tools that should satisfy your offline requirements.
But as ralph.m suggested you are better off using one of the online converters. Fontsquirrel is one. Everything Fonts has a font-face converter too.
http://everythingfonts.com/font-face
OK so I am trying to get IE9 to display the font Agenda. I went to fontsquirrel like usual and it says that font bureau doesn't allow them to create the font kit. I then went to codeandmore and made the kit there but they do not GIVE YOU EXPERT OPTIONS TO MAKE A LITE VERSION OF THE FONT. In IE 9, I get error CSS3111 and CSS3114:
CSS3111: #font-face encountered unknown error.
agenda-light.eot?#iefix
CSS3114: #font-face failed OpenType embedding permission check. Permission must be Installable.
agenda-light.ttf
I have tried multiple work arounds such as making the font face target the woff specifically which did not work.
#font-face {
font-family: 'IE9Agenda-Light';
src: url('agenda-light.woff') format('woff');
font-weight: normal;
font-style: normal;
}
I have added an .htaccess file with this syntax:
AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff
I think I need to place some kind of config file here but not sure what to use: ALSO MY CLIENT PURCHASED THE FONT so I don't have an illegal font. Here is my code:
#font-face {
font-family: 'Agenda-Bold';
src: url('agenda-bold.eot?') format('embedded-opentype'),
url('agenda-bold.woff') format('woff'),
url('agenda-bold.ttf') format('truetype'),
url('agenda-bold.svg#agenda-bold') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Agenda-Light';
src: url('agenda-light.eot');
src: url('agenda-light.eot?#iefix') format('embedded-opentype'),
url('agenda-light.woff') format('woff'),
url('agenda-light.ttf') format('truetype'),
url('agenda-light.svg#agenda-light') format('svg');
font-weight: normal;
font-style: normal;
}
THIS WORKS IN EVERY BROWSER EXCEPT FOR IE9, If someone has an alternative font face generator to font squirrel that will pack up the eot file as a lite version instead of the eot.compressed version that would be helpful that seems to be the only work around I have not found yet.
It seems that the Agenda font is available for web font use only as a hosted service, according to http://www.fontbureau.com/webfonts/ and this means that you should use the code provided to refer to the service, instead of generating your own font files.
If the font was purchased under a normal (non-web-font) license, you are not allowed to use it as a web font. See http://www.webtype.com/info/articles/fonts-and-the-law/
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