Search code examples
csssasscompass-sass

Difference between format('embedded-opentype') and format('eot')

I am using compass module to generate my css files from sccs files.

Earlier i was working only on Linux and the when the css file was created, the fon-face attribute looked like below : 

@font-face {
    font-family:"NationalReg";
    src: url('../fonts/national-regular.eot');
    src: url('../fonts/national-regular.eot?#iefix') format('eot'), url('../fonts/telecomnational-regular.woff') format('woff'), url('../fonts/national-regular.ttf') format('truetype'), url('../fonts/national-regular.svg') format('svg');
}

Now i am working on Windows, and the css file generated has below structure : 

@font-face {
    font-family:"NationalReg";
    src: url('../fonts/national-regular.eot');
    src: url('../fonts/national-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/telecomnational-regular.woff') format('woff'), url('../fonts/national-regular.ttf') format('truetype'), url('../fonts/national-regular.svg') format('svg');
}

Notice the difference in the format("eot") and format("embedded-opentype").

I understand that this is added for IE8 and below browsers. But will it create any problems if two different format tags are used (in windows/linux).

Solution

  • I have seen both values being used, but I was not able to find any documented difference.

    The Microsoft @font-face documentation says (emphasis mine):

    To specify specific font formats (only for externally referenced font files), use a format hint (format(fontFormat)) where fontFormat is a comma-separated list of format strings that denote supported font formats. Possible fontFormat values are "woff", "truetype", "opentype", and "embedded-opentype". The format hint is optional starting in Internet Explorer 9. (format hints are not supported in Internet Explorer 8 and earlier versions and are ignored.)

    Since the .eot file format is only for Microsoft browsers anyway, I would in this case just take their word for it and use format('embedded-opentype').