Search code examples
unicodefontsfont-face

Getting IE to use private code points in custom font via @font-face

I'm trying to use a custom font we created in Glyphs. It works well under some scenarios, and totally doesn't work under others.

I used FontSquirrel to create non-otf font files from an otf exported by Glyphs (except when I used TypeFront, which created/hosted them for me). The characters I created are in the unicode private use area, specifically in this range: http://www.decodeunicode.org/en/private_use_area/5

Here's what is working: * The font in Firefox and Safari * The font in Chrome if I include the opentype font file in CSS.

Here's what is broken:

  • The font renders blank, in Chrome, if I do not include the opentype font file in CSS.
  • The font renders empty boxes, in IE8/9, under any circumstance. (Haven't checked older versions.)

Here's what I've tried without success:

  • Hosting fonts locally. Hosting them on TypeFront.

  • The latest greatest bulletproof font-face declaration, provided by FontSquirrel and also by TypeFront.

Ex:

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

  • Using only the first src declaration above. And only the second one. And only the first line of the second one.

  • Changing the .htaccess file:

    AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf

I feel like I must be missing some critical step that will make the above work beautifully in every browser. Others have done it (FontAwesome's fonts are in the private use area). Can anyone tell me what I'm doing wrong?

Solution

  • Solved.

    FontSquirrel allows you to "subset" your fonts. Doing so seems to make the private area of unicode act much more predictably. In this case that meant giving it a range E400-E500.