WebFonts jumble

WebFonts_jumble_control.txt

fontface (IE9+)
http://caniuse.com/#feat=fontface

http://codingstill.com/2013/01/set-mime-types-for-web-fonts-in-iis/

.eot    application/vnd.ms-fontobject
.ttf    application/octet-stream
.svg    image/svg+xml
.woff   application/font-woff
.woff2  application/font-woff2

<system.webServer>
    <staticContent>
        <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
        <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
        <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
        <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
        <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>
</system.webServer>

or better:

<system.webServer>
    <staticContent>
        <remove fileExtension=".woff" />
        <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
    </staticContent>
</system.webServer>

IE eot
IOS svg
WOFF - Web Open Font Format - REC
Compressed TrueType/OpenType font that contains information about the font's source.

eot: IE8
svg: iOS
ttf: Win
woff: ALL (compressed)


WOFF2:
WOFF2 is a font format that provides, on average, a 30% reduction in file size,  in compatible browsers.
http://caniuse.com/#feat=woff2





iefix: Fix for IE8 bug
http://www.sitepoint.com/how-to-use-cross-browser-web-fonts-part-1/ 


simple example:
@font-face {
    font-family: 'YourFont';
    src: url('YourFont.eot'); /* IE 9 Compatibility Mode */
    src: url('YourFont.eot?#iefix') format('embedded-opentype'), /* IE < 9 */
         url('YourFont.woff') format('woff'), /* Firefox >= 3.6, any other modern browser */
         url('YourFont.ttf') format('truetype'), /* Safari, Android, iOS */
         url('YourFont.svg#YourFont') format('svg'); /* Chrome < 4, Legacy iOS */
}




@font-face {
  font-family: 'abril_fatfaceregular';
  src: url('abrilfatface-regular-webfont.eot');
  src: url('abrilfatface-regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('abrilfatface-regular-webfont.woff') format('woff'),
       url('abrilfatface-regular-webfont.ttf') format('truetype'),
       url('abrilfatface-regular-webfont.svg#abril_fatfaceregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

media queries:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
https://css-tricks.com/css-media-queries/