Relax Breath of Solution.Community tech blog of Sameera Thilakasiri - Consultant UI, UX, RWD Specialist/ Interactive Designer

Just I wanted.. Do you?…

Make @font-face Work on Android Devices and Apple Devices

Posted on January 11, 2013 | 1 Comment

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;
}

Incoming search terms:

Author
Sameera Thilakasiri By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.

Comments

One Response to “Make @font-face Work on Android Devices and Apple Devices”

  1. Joe Nio
    April 2nd, 2013 @ 4:17 pm

    Make @font-face Work on Android Devices and Apple Devices | Relax Breath of Solution….

Leave a Reply

You must be logged in to post a comment.