@font-face {
    font-family: 'roboto-bold';
    src: url('Roboto-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto-black';
    src: url('Roboto-Black.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto-medium';
    src: url('Roboto-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto-semibold';
    src: url('Roboto-SemiBold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto-regular';
    src: url('Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/*  */
:root {
    --bs-roboto-bold: roboto-bold;
    --bs-roboto-black: roboto-black;
    --bs-roboto-medium: roboto-medium;
    --bs-roboto-semibold: roboto-semibold;
    --bs-roboto-regular: roboto-regular;
}

/*  */
.roboto-bold {
    font-family: var(--bs-roboto-bold);
}
.roboto-black {
    font-family: var(--bs-roboto-black);
}
.roboto-medium {
    font-family: var(--bs-roboto-medium);
}
.roboto-semibold {
    font-family: var(--bs-roboto-semibold);
}
.roboto-regular {
    font-family: var(--bs-roboto-regular);
}