roboto font not working in css

Asked 6/5, 2015 at 10:24 Answered 7/5, 2015 at 9:0

Solved css xhtml font-face webfonts google-webfonts

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?

Demonstration answered 6/5, 2015 at 10:24 Comment(0)

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

Susette answered 6/5, 2015 at 11:8 Comment(4)

so i want to download .eot,.woff & .svg format roboto fonts and placed in same folder right? – Demonstration 6/5, 2015 at 11:55

no, there are few online tool are available which will generate all font type. you just need to keep same font type under same folder. – Susette 6/5, 2015 at 12:26

this tool you can use, it will give you all font formats. everythingfonts.com/font-face or fontsquirrel.com/tools/webfont-generator – Susette 6/5, 2015 at 12:29

If my solution works for you then you may close this answer by accepting it. – Susette 6/5, 2015 at 13:14

You should use google fonts, its really easy to use.

https://www.google.com/fonts#UsePlace:use/Collection:Robot

example

<head>
 <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>
<body>
<p style="font-family: 'Roboto', sans-serif;">Hello World</p>
</body>

Joachim answered 6/5, 2015 at 11:4 Comment(2)

if you don't trust the link like the other guys, just google 'google fonts roboto' – Joachim 6/5, 2015 at 11:6

Just remember the single ticks around the font name, that was my problem... – Grainy 10/2, 2020 at 16:11

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

Susette answered 6/5, 2015 at 11:8 Comment(4)

so i want to download .eot,.woff & .svg format roboto fonts and placed in same folder right? – Demonstration 6/5, 2015 at 11:55

no, there are few online tool are available which will generate all font type. you just need to keep same font type under same folder. – Susette 6/5, 2015 at 12:26

this tool you can use, it will give you all font formats. everythingfonts.com/font-face or fontsquirrel.com/tools/webfont-generator – Susette 6/5, 2015 at 12:29

If my solution works for you then you may close this answer by accepting it. – Susette 6/5, 2015 at 13:14

Why not use Google fonts?

Place in the header of your html:

<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,100italic,300italic,400italic,500italic,500,700,700italic,900,900italic' rel='stylesheet' type='text/css'>

Use in your css:

font-family: 'Roboto', sans-serif;

Austen answered 6/5, 2015 at 10:28 Comment(2)

for a security purpose we don't want this web link. can u suggest any other way to achieve this. – Demonstration 6/5, 2015 at 10:35

@Demonstration security purpose - If you're really concerned about it, use https. – Caoutchouc 6/5, 2015 at 11:10

The error is in defining a font named roboto-bold in the @font-face clause, but trying to use a font named roboto-bolditalic later on. That is not the same family!

Solution: make sure the names match.
You probably meant

font-family:'roboto-bold'; font-style:italic;

or, since you're defining the size too, you could use the font shorthand

font:italic 25px 'roboto-bold';

And there's no need for the !important.

Venn answered 7/5, 2015 at 9:0 Comment(0)

-2

its really easy to use in css.

@import url(http://fonts.googleapis.com/css?family=Roboto:700,400,500,300);

Desmund answered 6/5, 2015 at 11:19 Comment(3)

Sir, OP doesn't want to use google font library due to security reasons. I don't know how you answer is different than others offering same solution. – Susette 6/5, 2015 at 11:20

@KheemaPandey and still got upvoted. SO users are not reading OP comments for sure! – Audi 6/5, 2015 at 11:24

The OP did add the [google-webfonts] tag to the question, which might have contributed to the confusion. – Venn 7/5, 2015 at 9:3

Recommended topics

Hot tags