Make @font-face Work on Android Devices

Posted by & filed under Front-End Development, Quick Tips.

If you use FontSquirrel to generate @font-face kits you may have noticed that they abandoned the Smiley method of generating CSS in favor of newer methods like FontSpring or Mo Bulletproofer. This is great because CSS generated by FontSquirrel will now successfully render fonts in browsers on Android devices.

What if you want to update existing declarations to be Android-friendly? Instead of regenerating the entire @font-face kit, you can simply update your @font-face declarations manually to support Android devices. Here’s a code snippet to get you started:

@font-face {
font-family: 'MyFont';
src: url('MyFont.eot?') format('eot'), url('MyFont.woff') format('woff'), url('MyFont.ttf') format('truetype'), url('MyFont.svg#webfontwTBKaDwa') format('svg');
font-weight: normal;
font-style: normal;
}

BAM!

12 Responses to “Make @font-face Work on Android Devices”

  1. Jason

    This is great news! I tried it last year and it wasn’t working, and now… GREAT! :D Thanks for the update Brian

    Reply
  2. Kevin

    This does not work in internet explorer for me, and no matter how I do it in my external css file will it work in IE for me.

    I find myself needing this in the main document:

    @font-face {
    font-family: Gill Sans MT;
    src: url(‘template/fonts/GillSansMT.eot’);
    }

    Reply
  3. Ravi Padhi

    I tried it works in android!! Great man it saved a lot of time and efforts. Thanks again for great work!

    Reply
  4. Ashok Modi

    Font squirrel now generates them in the following manner:
    @font-face {
    font-family: ‘UndercoverRegular’;
    src: url(‘UNDERCOV-webfont.eot’); /* IE9 Compat Modes */
    src: url(‘UNDERCOV-webfont.eot?#iefix’) format(‘embedded-opentype’), /* IE6-IE8 */
    url(‘UNDERCOV-webfont.woff’) format(‘woff’), /* Modern Browsers */
    url(‘UNDERCOV-webfont.ttf’) format(‘truetype’), /* Safari, Android, iOS */
    url(‘UNDERCOV-webfont.svg#UndercoverRegular’) format(‘svg’); /* Legacy iOS */
    font-weight: normal;
    font-style: normal;

    }
    In essence, it seems like they got rid of the bulletproofing but the format of eot should be changed to ‘embedded-opentype’.

    Reply
  5. chandranath patra

    Hi,
    I am using some regional language fonts in my website. iphone & windows phone working nice but android phone is not working. I need help… code given bellow:

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

    Reply
  6. mallikarjun

    am working with android 4.0, in my device S2 font face not working, any one has idea help help me, thanks in advance :)

    Reply
  7. satyachandra

    Hi every one
    i want help for Segoe Print font for devices version.
    its not coming this font devices is it any solution for this proble
    @font-face {
    font-family:’Conv_Segoe Print’; /* Your Font Name */
    src:url(‘font/Conv_Segoe Print.eot?v=3.0.1′);
    src:url(‘font/Conv_Segoe Print.eot?#iefix&v=3.0.1′) format(‘embedded-opentype’),
    url(‘font/Conv_Segoe Print.woff?v=3.0.1′)format(‘woff’),
    url(‘font/Conv_Segoe Print.ttf?v=3.0.1′) format(‘truetype’)
    url(‘font/Conv_Segoe Print.svg?v=3.0.1′) format(‘truetype’);
    font-weight:normal;
    font-style:normal;
    }
    and am using this format

    Reply

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>