Test case does not use additional local system font. IE 9 does not support '@font-face' when it is in media query syntax.
It will support IE 6~9. Will not support Chrome, Safari, Firefox, Opera. Not recommended.
@font-face{font-family:ngeot;src:url(NanumGothic.eot)} body{font-family:ngeot}
It will support IE 6~8. Will not support Chrome, Safari, Firefox, Opera and IE 9. Not recommended.
eot-in-media-query.html <link rel="stylesheet" href="eot-in-media-query.css" /> <!--[if lt IE 9]><script src="respond.min.js"></script><![endif]--> eot-in-media-query.css @media all and (min-width:0px) { @font-face{font-family:ngeot;src:url(NanumGothic.eot)} body{font-family:ngeot} }
It will support Chrome, Safari, Firefox, Opera and IE 9. Will not supported IE 6~8. Not recommended.
@font-face{font-family:ngeot;src:url(NanumGothic.eot)} body{font-family:ngeot}
It will support Chrome, Safari, Firefox, Opera. Will not supported IE 6~9. Not recommended.
woff-in-media-query.html <link rel="stylesheet" href="woff-in-media-query.css" /> <!--[if lt IE 9]><script src="respond.min.js"></script><![endif]--> woff-in-media-query.css @media all and (min-width:0px) { @font-face{font-family:ngwoff;src:url(NanumGothic.woff)} body{font-family:ngwoff} }
It will support Chrome, Safari, Firefox, Opera and IE 6~9. But unexpectedly, IE downloads all fonts at the same time. It cause bad performance. Not recommended.
@font-face{font-family:ngwoff;src:url(NanumGothic.woff)} @font-face{font-family:ngeot;src:url(NanumGothic.eot)} body{font-family:ngwoff,ngeot}
It will support Chrome, Safari, Firefox, Opera and IE 6~8. Will not supported IE 9. IE 6~8 download all fonts at the same time. It cause bad performance. Not recommended.
woff-eot-each-in-media-query.html <link rel="stylesheet" href="woff-eot-each-in-media-query.css" /> <!--[if lt IE 9]><script src="respond.min.js"></script><![endif]--> woff-eot-each-in-media-query.css @media all and (min-width:0px) { @font-face{font-family:ngwoff;src:url(NanumGothic.woff)} @font-face{font-family:ngeot;src:url(NanumGothic.eot)} body{font-family:ngwoff,ngeot} }
It will support Chrome, Safari, Firefox, Opera and IE 6~9. Recommended.
@font-face{font-family:ng;src:url(NanumGothic.eot);src:local(※),url(NanumGothic.woff) format('woff')} /* IE 6~8 ignore 'local()' syntax. Finally IE 6~8 does not download WOFF. You can replace '※' character with other 2 byte character. It prevents Mac OS local font selection error. format('') value must be enclosed in single or double quotes. */ body{font-family:ng}
It will support Chrome, Safari, Firefox, Opera and IE 6~8. Will not support IE 9. Not recommended.
woff-eot-once-in-media-query.html <link rel="stylesheet" href="woff-eot-once-in-media-query.css" /> <!--[if lt IE 9]><script src="respond.min.js"></script><![endif]--> woff-eot-once-in-media-query.css @media all and (min-width:0px) { @font-face{font-family:ng;src:url(NanumGothic.eot);src:local(※),url(NanumGothic.woff) format('woff')} /* IE 6~8 ignore 'local()' syntax. Finally IE 6~8 does not download WOFF. You can replace '※' character with other 2 byte character. It prevents Mac OS local font selection error. format('') value must be enclosed in single or double quotes. */ body{font-family:ng} }