How to use webfont with @ font-face

Question

I want to change the font in my application to a custom font, but the following code does not work:

@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"); } 

Answer 1

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

etc.

Hope this helps. :)