How to use custom font in jQuery mobile 1.4.0?

Question

In my jQuery mobile app I want to use a custom font family , I have tired the following code but it didnt work .How can I use a custom font file in jQuery mobile ?

Please help me

CSS

@font-face{

    font-family:'Roboto-Light';
    src: url("Fonts/Roboto-Light.ttf"); 
}

font {
    text-shadow:0 0 0;
    -moz-user-select: none; 
    -webkit-user-select: none; 
   font-family: "Roboto-Light" !important;
}

Answer 1

Once you define the Roboto font family, you have to apply it as the default font on the page:

body, .ui-btn {
    font-family: Roboto-Light;
}

Make sure your path Fonts/Roboto-Light.ttf is correct.

You can also use google fonts if you will be connected to the internet, put this line in your CSS:

@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,500,700);

Also, for a more cross-browser solution you get eot, woff, and svg versions of the font as well as the ttf, then define the new font-face like this:

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

Here is a DEMO using google fonts

Answer 2

You would do it the same way as you do it in a web page. Just make sure your font directory exists and you are pointing to it correctly.

For a good example of how to do it correct go here:

http://www.fontsquirrel.com/