CODEWITHSUNDEEP
cssfont-face
enne87
enne87

Reputation: 2299

css - embed font both for IE and FF

I'm trying to embed a font, the problem is that it is just displayed in Firefox but not with Internet Explorer.

@font-face {
font-family: capture_it;
src: url('fonts/Capture_it.eot');
src: local('Comfortaa_it'),
    url('fonts/Capture_it.ttf') format('truetype'); 
}

Any help is very appreciated.

Thanks,

enne

Upvotes: 2

Views: 12356

Answers (4)

Jorge Huerga
Jorge Huerga

Reputation: 1

not exactly but close:

<style type="text/css">
@font-face {
 font-family: MyWebFont;
 src: url("font.eot") /* EOT file for IE (tested with ie8 and ie9)*/
}
@font-face {
 font-family: MyWebFont;
 src: url("font.ttf") /* TTF file for CSS3 browsers */
}
</style>

and make the eot file from: http://www.kirsle.net/wizards/ttf2eot.cgi

Upvotes: 0

Font Squirrel
Font Squirrel

Reputation: 1571

Font-face syntax is tricky, particularly with IE. Please use the one we developed here, which is cross-browser tested. http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

It looks like this:

@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 */
    }

Upvotes: 9

SpaceBeers
SpaceBeers

Reputation: 13957

Personally I'd use Google Fonts. If you can find one close enough to the one you want to use they're a really easy, quick and cross browser font solution. Moving away from Cufon to Google Fonts was a fantastic idea.

Well worth a look - http://www.google.com/webfonts#ChoosePlace:select

Upvotes: 0

T. Junghans
T. Junghans

Reputation: 11683

Different browsers support different font formats. You can generate all formats for optimal crossbrowser support with http://www.fontsquirrel.com/fontface/generator.

The following is from the table found on the url included above:

TTF: Raw TrueType file, designed to look good on-screen.

EOT Lite: EOTs are only supported by Internet Explorer. This EOT type is uncompressed and is the same filesize as a TTF.

EOT Compressed: EOT compressed with LZ compression. File sizes are often smaller than WOFF.

WOFF: Cross-browser, web-only font format that uses gzip compression. IE9+, FF3.6+, Chrome 5+

SVG: This is an XML format required by iOS devices before version 4.2.

SVGZ: This is gzipped version of SVG.

Upvotes: 8

Related Questions