Лучше вот так подключай шрифты:

@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