Подключение шрифтов

Если нижеприведенного кода мало, то больше опций можно найти в MDN.

/* latin */
@font-face {
    font-family: 'Open Sans';
    src: local("Open Sans"),
         url(/template/open-sans-lat.woff) format('woff'),
         url(/template/open-sans-lat.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic */
@font-face {
    font-family: 'Open Sans';
    src: local("Open Sans"),
         url(/template/open-sans-cyr.woff) format('woff'),
         url(/template/open-sans-cyr.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

Определение переменных

:root {
    --sans-serif: system-ui, sans-serif;
    --monospace: "consolas", monospace;
}