CODEWITHSUNDEEP
cssfont-facewebfonts
shadeed9
shadeed9

Reputation: 1826

Roboto font doesn't work in Firefox

I'm working on a blog design and the main font is Roboto, it's from Google fonts site.

The problem is that it's doesn't rendered correctly in Firefox, instead of using Roboto font, Firefox use Tahoma.

@font-face
{
    font-family: Roboto-Regular;
}

@font-face
{
    font-family: Roboto-Bold;
}

It works well in Chrome and Safari.

Thanks,

Upvotes: 5

Views: 15382

Answers (3)

PéterB
PéterB

Reputation: 1

Roboto Condensed font is broken in Firefox in Hungarian language. In Chrome it works perfectly.

I tried the font using a Hungarian language test case 'árvíztűrő tükörfúrógép'. This string contains all special characters in the Hungarian language.

The broken characters are 'ű' and 'ő'.

Here is the HTML code:

<html>
  <head>
    <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300,regular,700' rel='stylesheet' type='text/css'>
  </head>
    <body>
    <p class="roboto">ÁRVÍZTŰRŐ TÜKÖRFÚRÓGÉP<br>árvíztűrő tükörfúrógép</p>
    <p>ÁRVÍZTŰRŐ TÜKÖRFÚRÓGÉP<br>árvíztűrő tükörfúrógép</p>
  </body>
</html>

And here is the applied CSS:

.roboto {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 300;
}

Upvotes: 0

user46624
user46624

Reputation: 149

I created a quick page which shows 3 fonts, Roboto, Tahoma and the default: 

<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>
    <body>
    <p class="roboto">The quick brown fox jumps over the lazy dog</p>
    <p class="tahoma">The quick brown fox jumps over the lazy dog</p>
    <p>The quick brown fox jumps over the lazy dog</p>
  </body>
</html>

http://codepen.io/anon/pen/bptvC

On firefox it shows Roboto.

Upvotes: 1

Guffa
Guffa

Reputation: 700412

To use Roboto in regular and bold versions, use this to include the style sheet in the page:

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

Then you use the font family name Roboto and set the weight using the font-weight style.

You can set them like this, and always use a fallback font:

font-family: Roboto, sans-serif;
font-weight: normal;

font-family: Roboto, sans-serif;
font-weight: bold;

Instead of the font weight names normal and bold you can also use the specific weight numbers 400 and 700, respectively.

Upvotes: 3

Related Questions