Лучше вот так подключай шрифты:
@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 
