Roboto font doesn't work in Firefox

css font-face webfonts

13,038

Solution 1

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.

Solution 2

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.

13,038

Author by

shadeed9

UI, UX Designer and Front End Web Developer. Learning Front End Dev since July 2, 2014.

Updated on June 29, 2022

Comments

shadeed9 almost 2 years
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,