Custom Fonts in Android PhoneGap

android cordova custom-font

34,329

Solution 1

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.

Solution 2

Below works like charm for custom font with jQueryMobile and Phonegap:

@font-face {
font-family: "Lato-Reg";
src: url("../resources/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;

 }

Solution 3

I also faced the same problem. I put my css file in the css folder. I put the ttf file in just the www folder and it didn't work properly, so I moved my ttf file into the css folder. Here is my code:

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

Now it will work. You can try like this, may be its useful for you.

Solution 4

I was facing a similiar issue. The problem was with the path it was taking when the font was given through an external css file. To resolve this, i declared the font URL inline in the body of index.html

<div>
      <style scoped>
        @font-face {
          font-family: Monotype Corsiva;
          src: url('fonts/Monotype_Corsiva.ttf') format('truetype');
        }
      </style>
</div>

It worked after declaring the font URL in this manner.

Solution 5

here your can find the .ttf the google fonts : https://github.com/w0ng/googlefontdirectory

in your .css file

@font-face {
 font-family: 'Open Sans';
 src: url('../font/OpenSans-Regular.ttf') format('truetype');
 font-weight: 400;
}

View more solutions

34,329

Author by

Admin

Updated on July 09, 2022

Comments

Admin almost 2 years

I tried to make custom fonts for my application. For that, I wrote this code in my html file:

<style type="text/css" media="screen">
        @font-face {
            font-family: centurySchoolbook;
            src: url(/fonts/arial.ttf);
        }
       body {
           font-family: centurySchoolbook;
           font-size:30px;
       }
</style>

In my Html Body:

<body onload="init();">
<h>Custom Fonts</h>
    <div>This is for sample</div>

</body>

But, these styles are not applied to my html body.. Any help to solve this..??

Admin over 11 years

Thank you for your post, I tried the same with correct path..But, still no change.
Littm over 11 years

oh... :( ... Are you using Android or iOS? Also, are you using libraries like jQuery Mobile?
Admin over 11 years

Android, and included below tags: <script type="text/javascript" charset="utf-8" src="js/phonegap-1.1.0.js"></script> <script src="js/jquery-1.6.4.js"></script> <script src="js/jquery.mobile-1.0rc1.min.js"></script> <script src="js/main.js"></script>
Littm over 11 years

:O... oh I see... I'm not sure but I think jQuery Mobile is "interferring"... give me some secs...
Littm over 11 years

Hey mate, do you want to use the font for a specific part of HTML, or do you want to use it everywhere in your page?
Littm over 11 years

Could you try the example which is located in the end of my post? ( <body> <h>Custom Fonts</h> <div style="font-family: 'customfont';">This is for sample</div> </body> )
Littm over 11 years

Hey mate, if you want to use the font for the whole page, you may check the last part of my post (I re-edited it and made it work, including jQuery Mobile :) )
Littm over 11 years

:(... ths is really strange... It may be different for Android maybe? I'll try on Android and let you know if I solve this problem :)
T Nguyen about 11 years

Can you elaborate on why jQuery Mobile would "interfere" with custom CSS? Or better yet, can you give an example of what you mean by "interference"?
Majid Abarghooei almost 11 years

I tried that but unfortunately, it didn't work. When I test the page using firefox or chrome everything is OK but in emulator it fails. Do you have any idea?
amol-c almost 11 years

I tested it against the xcode on IOS. Are u trying it on Android ?
Majid Abarghooei almost 11 years

yes, I'm trying that in android, is there any way to do that?
amol-c almost 11 years

I have not tried porting to android, u shld try asking this question.
ChenSmile about 10 years

@Littm i m using ur code in iOS, but it does not work. please help me out
Littm about 10 years

@Immi: Hi mate! What is the format of your font file? Is it TTF? Also, did you tried your app on your device or only on the simulator?
ChenSmile about 10 years

@Littm spinwerad.ttf. i tried in simulator...Please help me out..I requirement is to display list of Font style. and select particular font style among those. and selected font style should be applied...
Rez over 9 years

@Littm did you test it on the unicode test like arabic or pesian? i have problem with arabic text and font not applied
Sebastian Mach over 9 years

And some explanation for why "it works like a charm"?
pixparker almost 9 years

@Littm Are you sure android supports font-face ?
סטנלי גרונן about 7 years

Is my browser going bananas or you did post the same answer 3 times?!?
Utz about 7 years

Sorry for that as i am new here … i just wanted to correct something in my sentences and thought it would update, but it posted copies… SORRY :(
Utz about 7 years

I tried to "delete recent posts" but that doesn't work.
Utz about 7 years

Finally – i got it! Must have been a cache problem as i used the back button for editing my first answer. Couldn't find edit-button anywhere before – but now it is here.