@font-face {
    font-family: 'Roboto Variable';
    src: url('Roboto-variable.ttf') format('truetype');
    font-weight: 100 900; /* Supports weight range from 100 to 900 */
    font-stretch: 75% 125%; /* Supports width variation */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'RobotoMono Variable';
    src: url('RobotoMono-Variable.ttf') format('truetype');
    font-weight: 100 900; /* Supports weight range from 100 to 900 */
    font-stretch: 75% 125%; /* Supports width variation */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'RobotoSlab Variable';
    src: url('RobotoSlab.ttf') format('truetype');
    font-weight: 100 900; /* Supports weight range from 100 to 900 */
    font-stretch: 75% 125%; /* Supports width variation */
    font-style: normal;
    font-display: swap;
}