@font-face {
    font-family: 'Inter';
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    src: url('Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype-variations'),
         url('Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype');
}

/* Курсив (Italic) */
@font-face {
    font-family: 'Inter';
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
    src: url('Inter/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype-variations'),
         url('Inter/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
}


/* ==========================================================================
   2. ROBOTO (Має осі wdth та wght від 100 do 900)
   ========================================================================== */

/* Звичайний (Normal) */
@font-face {
    font-family: 'Roboto';
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    src: url('Roboto/Roboto-VariableFont_wdth,wght.ttf') format('truetype-variations'),
         url('Roboto/Roboto-VariableFont_wdth,wght.ttf') format('truetype');
}

/* Курсив (Italic) */
@font-face {
    font-family: 'Roboto';
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
    src: url('Roboto/Roboto-Italic-VariableFont_wdth,wght.ttf') format('truetype-variations'),
         url('Roboto/Roboto-Italic-VariableFont_wdth,wght.ttf') format('truetype');
}


/* ==========================================================================
   3. MONTSERRAT (Має вісь wght від 100 do 900)
   ========================================================================== */

/* Звичайний (Normal) */
@font-face {
    font-family: 'Montserrat';
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    src: url('Montserrat/Montserrat-VariableFont_wght.ttf') format('truetype-variations'),
         url('Montserrat/Montserrat-VariableFont_wght.ttf') format('truetype');
}