Подключение шрифта к сайту

Ответ выше правильный, но я его хочу дополнить чуток на своем примере:

@font-face {
    font-family: OpenSans;
    font-style: normal;
    font-weight: 300;
    src:    local("Open Sans Light"),
            local('OpenSans-Light'),
            local('Open-Sans-Light'),
            url('/fonts/Open_Sans/OpenSans-Light.ttf')  format('truetype');
    font-display: swap;
}
@font-face {
    font-family: OpenSans;
    font-style: normal;
    font-weight: 400;
    src:    local("Open Sans"),
            local('OpenSans'),
            local('Open-Sans'),
            url('/fonts/Open_Sans/OpenSans-Regular.ttf')  format('truetype');
    font-display: swap;
}

То есть, называете шрифт:

font-family: OpenSans;

говорите, какой стиль шрифта подключаете (типа там обычный или курсив):

font-style: normal;

Далее добавляйте жирность шрифта, в основном для light это 300, regular 400, bold 700:

font-weight: 300; 

Далее веселее, мы как бы спрашиваем, есть ли у пользователя такой шрифт вообще на компе, и если да грузим его, а не наш:

src:    local("Open Sans Light"),
        local('OpenSans-Light'),
        local('Open-Sans-Light'),
        url('/fonts/Open_Sans/OpenSans-Light.ttf')  format('truetype');

Ну и последний тренд, насколько я знаю, пихаем:

font-display: swap;

Теперь ваш шрифт будет использоваться только после полной загрузки, не мешая отображению сайта до тех пор (то есть сначала пользователь увидит шрифт по умолчанию, и только затем, когда прогрузится ваш сайт, он увидит новый шрифт)

Вы не правильно подключаете шрифт:

@font-face {
  font-family: Output Sans;
  src: url(output-sans.woff2) format('woff2'),
       url(output-sans.woff) format('woff');
}

После чего в коде используйте его как:

font-family: Output Sans;

Более глубоко этот вопрос расcматривается здесь.