7

I want to change the font in my application to a custom font but the following code is not working:

@font-face 
{
font-family: "ArnoProBold"; 
src: url("resources/fonts/ArnoProBold.ttf");
}
@font-face 
{
 font-family: "ArnoProCaption"; 
 src: url("resources/fonts/ArnoProCaption.ttf");
}
@font-face 
{
 font-family: "Arn";
 src: url("resources/fonts/ArnoProLightDisplay.ttf");
}
user229044
  • 232,980
  • 40
  • 330
  • 338
Rithesh
  • 101
  • 6

1 Answers1

10

Hey @Ritesh please try something like this,

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

and so on.

I hope this helps. :)

hekomobile
  • 1,388
  • 1
  • 14
  • 35
  • hey i have applied this css in index file ,when iam applying this font text not displaying,is there any other option,if we add this in app.css there also not working – Rithesh Jul 15 '12 at 09:22
  • How do these apply in your files? In app.css file just put `font` like this, e.g.: `label { font: ArnoProBold; }` or `.your_class { font: ArnoProBold; font-size: 12px;}`. I hope this helps. ;) – hekomobile Jul 16 '12 at 17:58
  • Whats that `ArnoProBold`, while having `font-weight: normal` ? – Peyman Mohamadpour Apr 20 '17 at 13:32