21

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..??

4
  • You forgot '' around the URL. Does it work when you add those?
    – Klaasvaak
    Sep 17, 2012 at 7:22
  • I think Klaasvaak means that you typed src: url(/fonts/arial.ttf); (without the double quotes ") in your CSS code. Shouldn't it be src: url("/fonts/arial.ttf"); ? Could you test your code with this modification?
    – Littm
    Sep 17, 2012 at 9:30
  • I tried like that also.. But o/p was same..
    – user1357696
    Sep 17, 2012 at 9:35
  • In fact, you may try to put your CSS code in a css file and not in HTML. I don't know why, but it seems that putting the CSS directly inside HTML makes it not to work :S...
    – Littm
    Sep 17, 2012 at 11:02

8 Answers 8

32

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.

14
  • 3
    Thank you for your post, I tried the same with correct path..But, still no change.
    – user1357696
    Sep 17, 2012 at 11:09
  • oh... :( ... Are you using Android or iOS? Also, are you using libraries like jQuery Mobile?
    – Littm
    Sep 17, 2012 at 11:22
  • 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>
    – user1357696
    Sep 17, 2012 at 11:26
  • :O... oh I see... I'm not sure but I think jQuery Mobile is "interferring"... give me some secs...
    – Littm
    Sep 17, 2012 at 11:31
  • 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
    Sep 17, 2012 at 11:36
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;

 }
5
  • 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? Apr 30, 2013 at 21:15
  • I tested it against the xcode on IOS. Are u trying it on Android ?
    – amol-c
    May 7, 2013 at 19:19
  • yes, I'm trying that in android, is there any way to do that? May 7, 2013 at 20:31
  • I have not tried porting to android, u shld try asking this question.
    – amol-c
    May 8, 2013 at 3:41
  • And some explanation for why "it works like a charm"? Oct 24, 2014 at 9:14
2

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.

1

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

this screenshot should help

in your .css file

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

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.

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

with quotes on the font-family and on the url worked for me, inside the html file and on Android.

It works on physical devices, but not on emulator.

0

The possible issues lies in default index.css in cordova. Check if the body element has style defined for "text-transform:uppercase".

Atleast that was the issue for me, after removing this from body element in default index.css if you are using in your application, may help you as well.

For me I was using gurmukhi/punjabi fonts, and after the above line removal from index.css it just worked like charm with below css definiitions only

Example :

.demo {
   font-family: anmol
}
@font-face {
   font-family: anmol;
   src: url(../fonts/anmol.ttf);
}
0

I just copied my ttf-fonts into the directory [app-name]/css and declared the font-families in the index.css there. See attached image: my edited index.css (Check the green marked areas in the attached picture). There i also changed the style "background-attachment:fixed;" "Helvetica, Arial, no-serif…" to "Open Sans, Open Sans Condensed, no-serif", – i also deleted the line "text-transform:uppercase". After that everything worked fine with my font "Open Sans". Of course i also included my own stylesheet with declarations of the other styles and font-families of my project.

I am also using jQuery and jQueryMobile in that project. They use the same font (Open Sans), but i added additional fonts that work as well!

Happy coding!

4
  • Is my browser going bananas or you did post the same answer 3 times?!? Apr 9, 2017 at 10:11
  • 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
    Apr 9, 2017 at 10:24
  • I tried to "delete recent posts" but that doesn't work.
    – Utz
    Apr 9, 2017 at 10:29
  • 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.
    – Utz
    Apr 9, 2017 at 10:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.