- This topic is empty.
-
AuthorPosts
-
December 10, 2012 at 1:43 pm #41258cheesedude31Member
So I had it like this:
@font-face{
font-family: font;
src: url(‘font.ttf’);
src: url(‘font.eot’);
}And worked in chrome but not ie9.
@font-face{
font-family: font;
src: url(‘font.eot’);
src: url(‘font.ttf’);
}this was the other way round.
@font-face{
font-family: font;
src: url(‘font.eot’),
url(‘font.ttf’);
}then listed like this and it only works in chrome
@font-face{
font-family: font;
src: url(‘font.eot’),
src: url(‘font.ttf’);
}and finally like this where it worked in neither. I’m at a loss. Am grateful for any help.
December 10, 2012 at 1:49 pm #116758Chris CoyierKeymasterThis is from CSS3please.com – my go-to for the latest greatest CSS3 (even though @font-face isn’t really CSS3) syntax.
This looks weird to me though, as the last I remember it, it required a few more formats and weird stuff like a hash tag in the url() src.
@font-face {
font-family: ‘WebFont’;
src: url(‘myfont.woff’) format(‘woff’), /* Firefox 3.6+, IE9+, Chrome 6+, Safari 5.1+*/
url(‘myfont.ttf’) format(‘truetype’); /* Safari 3—5, Chrome4+, Firefox 3.5, Opera 10+ */
}This was the hip way for a while: http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax
Maybe something changed…
Another good resource is to download a @font-face pack from [Font Squirrel](http://www.fontsquirrel.com/) and look at the syntax that you get in the CSS from them. That’s always super up-to-date.
December 10, 2012 at 2:44 pm #116769cheesedude31MemberAfter looking at font squirrel i found this nice and convenient method
@font-face {
font-family: ‘MyFont’;
src: url(‘font.eot’);
src: url(‘font.eot?#iefix’) format(’embedded-opentype’),
url(‘font.woff’) format(‘woff’),
url(‘font.ttf’) format(‘truetype’),
url(‘font.svg#MyFont’) format(‘svg’);
font-weight: normal;
font-style: normal;
}Found this website http://www.font2web.com/ which converts otf and ttf to all necessary formats, so fun times.
Thanks anyway.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.