Custom font wont embed on Android what am I doing wrong

Question

I have a custom font that will not work on Android devices but works in chrome and Firefox and IE 11. On the server I have 2 font files called: Ventilla Script_0.eot and Ventilla Script_0.ttf

I currently have the following in my css:

  /* Fonts */
    @font-face {
        font-family: 'Ventilla Script';
        src: url('../fonts/Ventilla Script_0.eot?') format('embedded-opentype');
        }
    @font-face {

        font-family: Ventilla Script;
        src: local(Ventilla Script_font), url('../fonts/Ventilla Script_0.ttf') format('opentype');

    }

As far as I can tell that .tff rule should work on Android browsers, can anyone tell me what I might need to add.

Thanks

Ian

Answer 1

You should use Squirrel font generator

It worked for me on android devices.

Answer 2

I had tried Squirrel font generator but I must have pasted something wrong, however after asking this question I found this link http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

now my css looks like this

@font-face {
font-family: 'Ventilla Script';
src: url('../fonts/Ventilla Script_0.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/Ventilla Script_0-webfont.woff') format('woff'), 
     url('../fonts/Ventilla Script_0.ttf')  format('truetype'),
     url('../fonts/Ventilla Script_0-webfont.svg#svgVentilla Script') format('svg');
}

and it works on my phone and Galaxy Tab 3

Cheers

Ian