Почему Firefox не «видит» шрифт Roboto?
Лучше вот так подключай шрифты:@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Regular.woff2') format('woff2'),
           url('Roboto-Regular.woff') format('woff');
    font-weight: normal;
}
Если необходимо bold ещё подключить то меняешь url и font-weight, а название оставляешь тоже.@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Regular.woff2') format('woff2'),
           url('Roboto-Regular.woff') format('woff');
    font-weight: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('Roboto-bold.woff2') format('woff2'),
           url('Roboto-bold.woff') format('woff');
    font-weight: bold;
}
Ну и в самих стилях пишешь вот так// Если нужен bold
h1 {
    font-family: Roboto;
    font-weight: bold;
}
// Если нужен Regular
h1 {
    font-family: Roboto;
    font-weight: normal; // Либо можно не писать т.к. по умолчанию стоит
}
Собственно все остальные форматы кроме woff и woff2 можешь убрать. Можно ещё добавить ttf если нужна поддержка старых Android. 
Вот кроссбраузерность woff caniuse.com/#feat=woff 
Если уж так нужен ie8, то можно ещё eot подключить, но вряд ли оно того стоит.
Другие форматы подключаются также в src через запятую, после последнего ; не забудь.
Вот здесь можешь почитать поподробнее про подключение
nicothin.pro/page/web-fonts
woff2 я здесь брал 
https://github.com/FontFaceKit/roboto
Похоже на проблемы с насыщенностью. Возможно, ниже в css указаны насыщенности, отличные от normal, и браузер сам подгоняет. Попробуй подключать шрифт правильно, т.е. указывая  для всех начертаний единое имя, но соответствующие font-weight.@font-face {
  font-family: "Roboto";     // <--
  src: url("../fonts/RobotoRegular/RobotoRegular.eot");
  ...
  font-style: normal;
  font-weight: normal;     // <--
}
@font-face {
  font-family: "Roboto";     // <--
  src: url("../fonts/RobotoLight/RobotoLight.eot");
  ...
  font-style: normal;
  font-weight: 300;     // <--
}