Custom font in Phonegap Android or html5

http://stackoverflow.com/questions/12454681/custom-fonts-in-android-phonegap

http://www.fontspace.com/category/contemporary  <== free font download link

Below works like charm for custom font with jQueryMobile and Phonegap:
Added in html file head section:
Working Example:
===============

phonegap1.4= eclipse= android= windows= mx p410 tab== working

In a html file add this style code and download and store custom font in asset/www dir.
Call this otf or tif file for

 <style type="text/css" media="screen">

 @font-face {
                font-family: 'tombats7';
                src: url('fonts/tombats7.ttf');
            }

 @font-face {
    font-family: 'MyFont';
 src: url('fonts/ThirstyScriptExtraBoldDemo.otf');

}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,h,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
                font-family: 'MyFont';
        }
      
      
</style>
 body { font-family: 'MyFont';} alone does not display custom font.

method:1
<style>

@font-face {
font-family: "Lato-Reg";
src: url("fonts/Lato-Reg.ttf") format("opentype");  
    /* Make sure you defined the correct path, which is related to
        the location of your file `my_css.css` */
}

 body *{
margin: 0;
-webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
-webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */

font-family: "Lato-Lig" !important;
font-weight: normal !important;

 }
</style>


Method:2

@font-face
{
font-family: CustomArial;
src: url('arial.ttf');
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    font-family: CustomArial;
}

if you are using jquery mobile, you have to override the font like,

.ui-bar-a, .ui-bar-a input, .ui-bar-a select, .ui-bar-a textarea, .ui-bar-a button {
    font-family: CustomArial !important;
}

you have to override the font- family in your css for whatever jquery mobile class having font-family:Helvetica, Arial, sans-serif; to
font-family:CustomArial !important;

Method:3



I made it work after doing the following steps:

-Put your CSS in a file, for example my_css.css:

@font-face {
    font-family: "customfont";
    src: url("./fonts/arial.ttf") format("opentype");  
        /* Make sure you defined the correct path, which is related to
            the location of your file `my_css.css` */
    }
    body {
        font-family: "customfont";
        font-size:30px;
    }

-Reference your CSS file my_css.css in your HTML:

<link rel="stylesheet" href="./path_to_your_css/my_css.css" />

Pay attention to the definition of your paths!

For example, let's say you have the following directory structure:

    www

        your_html.html

        css
            my_css.css

        fonts
            arial.ttf

Then, you would have:

@font-face {
    font-family: "customfont";
    src: url("../fonts/arial.ttf") format("opentype");  
        /* Make sure you defined the correct path, which is related to
            the location of your file `my_css.css` */
    }
    body {
        font-family: "customfont";
        font-size:30px;
    }

and:

<link rel="stylesheet" href="./css/my_css.css" />

Note: if you use jQuery Mobile, the solution may not work (jQuery Mobile will "interfere" with the css...).

So, you may try to impose your style by using the style attribute.

Eg:

<body>
    <h>Custom Fonts</h>
    <div style="font-family: 'customfont';">This is for sample</div>
</body>

One drawback is that it seems that the style cannot be applyied on body...

So, if you want to apply the font to the whole page, you may try something like this:

<body>

    <!-- ADD ADDITIONAL DIV WHICH WILL IMPOSE STYLE -->
    <div style="font-family: 'customfont';">

        <h>Custom Fonts</h>
        <div >This is for sample</div>

    </div>

</body>

Hope this will work for you too. Let me know about your results.