@font-face {
    font-display: block;
    font-weight: 100;
    font-family: roboto;
    font-style: normal;
    src: url(./ttf/ultralight.ttf) format('truetype'), url(./woff/ultralight.woff) format('woff'), url(./woff2/ultralight.woff2) format('woff2');
}


@font-face {
    font-display: block;
    font-weight: 200;
    font-family: roboto;
    font-style: normal;
    src: url(./ttf/ultralight.ttf) format('truetype'), url(./woff/ultralight.woff) format('woff'), url(./woff2/ultralight.woff2) format('woff2');
}


@font-face {
    font-display: block;
    font-weight: 300;
    font-family: roboto;
    font-style: normal;
    src: url(./ttf/light.ttf) format('truetype'), url(./woff/light.woff) format('woff'), url(./woff2/light.woff2) format('woff2');
}


@font-face {
    font-display: block;
    font-weight: 400;
    font-family: roboto;
    font-style: normal;
    src: url(./ttf/regular.ttf) format('truetype'), url(./woff/regular.woff) format('woff'), url(./woff2/regular.woff2) format('woff2');
}


@font-face {
    font-display: block;
    font-weight: 500;
    font-family: roboto;
    font-style: normal;
    src: url(./ttf/medium.ttf) format('truetype'), url(./woff/medium.woff) format('woff'), url(./woff2/medium.woff2) format('woff2');
}


@font-face {
    font-display: block;
    font-weight: 600;
    font-family: roboto;
    font-style: normal;
    src: url(./ttf/bold.ttf) format('truetype'), url(./woff/bold.woff) format('woff'), url(./woff2/bold.woff2) format('woff2');
}


@font-face {
    font-display: block;
    font-weight: 700;
    font-family: roboto;
    font-style: normal;
    src: url(./ttf/bold.ttf) format('truetype'), url(./woff/bold.woff) format('woff'), url(./woff2/bold.woff2) format('woff2');
}


@font-face {
    font-display: block;
    font-weight: 800;
    font-family: roboto;
    font-style: normal;
    src: url(./ttf/black.ttf) format('truetype'), url(./woff/black.woff) format('woff'), url(./woff2/black.woff2) format('woff2');
}


@font-face {
    font-display: block;
    font-weight: 900;
    font-family: roboto;
    font-style: normal;
    src: url(./ttf/black.ttf) format('truetype'), url(./woff/black.woff) format('woff'), url(./woff2/black.woff2) format('woff2');
}


.roboto {
    font-family: roboto, -apple-system, Helvetica, Arial, sans-serif;
}