Как подключить ttf шрифт в css

Для подключения шрифтов в CSS используется правило @font-face. В нём обязательно используется два свойства:

1. font-family — здесь указывается название шрифта, под которым он будет использоваться в проекте
2. src — путь к шрифту. Обычно, в качестве значения, используется функция url(). Внутри функции указывается путь

@font-face {
  font-family: "Roboto Regular";
  src: url("../fonts/Roboto-Regular.ttf");
}

Если начертаний шрифта несколько, например Regular, Bold, Medium и так далее, то их можно подключить под одним именем, а потом менять через свойство font-weight. Главное, что каждое начертание указывается внутри своего правила @font-face и имя шрифта должно совпадать. Так же, внутри каждого @font-face указывается своё значение font-weight:

@font-face {
  font-weight: 400; /* Соответствует значению normal */
  font-family: Roboto;
  src: url("../fonts/Roboto-Regular.ttf");
}

@font-face {
  font-weight: 700; /* Соответствует значению bold */
  font-family: Roboto;
  src: url("../fonts/Roboto-Bold.ttf");
}

@font-face {
  font-weight: 300;
  font-family: Roboto;
  src: url("../fonts/Roboto-Light.ttf");
}