Как подключить локальные шрифты на сайт

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

@font-face {
  font-family: "Circe";
  src: url("fonts/circe-light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Circe";
  src: url("fonts/circe-bold.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Circe";
  src: url("fonts/circe-extrabold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

Сами файлы шрифтов должны лежать в папке fonts.

название файлов может быть любое, главное прописать правильный путь.

В параметре font-family может быть любое название, шрифта, главное использовать его именно так как подключаем.