@font-face on Android

First there was the smiley face hack, then came Mo’ Bulletproof. The latest incarnation of ‘How to get @font-face declarations working across all browsers’ doesn’t have a cool moniker as far as I’m aware, but here’s some gen on how to go about it. First of all, this one will work fine – but not on Android devices;

@font-face {
    font-family: 'Din';
    src: url('../fonts/din_eng_webfont.eot');
    src: url('../fonts/din_eng_webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/din_eng_webfont.woff') format('woff'),
         url('../fonts/din_eng_webfont.ttf') format('truetype'),
         url('../fonts/din_eng_webfont.svg#Din') format('svg');
    font-weight: normal;
    font-style: normal;
}

The subtle but important difference in the working code (below) is that the initial .eot format code is removed like so;

@font-face {
    font-family: 'Din';
    src: url('../fonts/din_eng_webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/din_eng_webfont.woff') format('woff'),
         url('../fonts/din_eng_webfont.ttf') format('truetype'),
         url('../fonts/din_eng_webfont.svg#Din') format('svg');
    font-weight: normal;
    font-style: normal;
}

However this won’t work on IE7 and IE8. So I just add an alternative @font-face declaration into a conditional stylesheet and load that into those two browsers. In the header;

<!--[if lt IE 8]><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/assets/stylesheets/ie.css" type="text/css" media="screen" /><![endif]-->

And then in the ie.css file itself;

@font-face {
    font-family: 'Din';
    src: url('../fonts/din_eng_webfont.eot');
}