@font-face {
    font-family: 'Roboto';
    src: url('fonts/roboto-bold.html');
    src: url('fonts/roboto-bold.html') format('embedded-opentype'),
         url('fonts/roboto-bold-2.html') format('woff'),
         url('fonts/roboto-bold-3.html') format('truetype'),
         url('fonts/roboto-bold-4.html#RobotoBold') format('svg');
    font-weight: 700;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/roboto-light.html');
    src: url('fonts/roboto-light.html') format('embedded-opentype'),
         url('fonts/roboto-light-2.html') format('woff'),
         url('fonts/roboto-light-3.html') format('truetype'),
         url('fonts/roboto-light-4.html#RobotoLight') format('svg');
    font-weight: 300;
}


@font-face {
    font-family: 'Roboto';
    src: url('fonts/roboto-thin.html');
    src: url('fonts/roboto-thin.html') format('embedded-opentype'),
         url('fonts/roboto-thin-2.html') format('woff'),
         url('fonts/roboto-thin-3.html') format('truetype'),
         url('fonts/roboto-thin-4.html#RobotoThin') format('svg');
    font-weight: 100;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/roboto-regular.html');
    src: url('fonts/roboto-regular.html') format('embedded-opentype'),
         url('fonts/roboto-regular-2.html') format('woff'),
         url('fonts/roboto-regular-3.html') format('truetype'),
         url('fonts/roboto-regular-4.html#RobotoRegular') format('svg');
    font-weight: 400;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/roboto-medium.html');
    src: url('fonts/roboto-medium.html') format('embedded-opentype'),
         url('fonts/roboto-medium-2.html') format('woff'),
         url('fonts/roboto-medium-3.html') format('truetype'),
         url('fonts/roboto-medium-4.html#RobotoMedium') format('svg');
    font-weight: 500;
}