roboto font not working in css

Question

I've CSS and XHTML files. I've downloaded all the ROBOTO fonts and put it in my "webapps/fonts/" folder.

In my XHTML i mentioned the CSS Path,

'<link href="../css/tab_ux.css" rel="stylesheet" type="text/css" />'

AND my CSS file have styles like,

@font-face {
   font-family:roboto-bold;
   src: url('../fonts/Roboto-Bold.tff') @ttf;
}

.UX_FontClass {
   font-family: roboto-bolditalic !important;
   font-size : 25px !important;
}

also mentioned XHTML in OutputText as styleClass="UX_FontClass "

Even though font is not working in any browser. What i did wrong with my code? OR Anything i missed out?

Answer 1

You are using custom font so you need to add a few font type format as well; like ttf, eot and svg for iphone, ipad devices.

Note: Some browsers supports different font type that's why you need ttf,svg or eot.

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-ThinItalic-webfont.eot');
    src: url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-ThinItalic-webfont.woff') format('woff'),
         url('Roboto-ThinItalic-webfont.ttf') format('truetype'),
         url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (under the Apache Software License). 
    font-weight: 200;
    font-style: italic;
}

Remember after that you need to add this code in class UX_FontClass

.UX_FontClass {font-family: 'Roboto', Arial, Helevtica, sans-serif; }