Basic

@font-face {
  font-family: "Mechanical";
  src: url("mechanical.otf") format("opentype");
}

.ttf     format("truetype")
.woff    format("woff")
.woff2   format("woff2")
.otf     format("opentype")

Vue

@font-face {
    font-family: Mechanical;
    src: url("~@/assets/fonts/Mechanical.otf") format("opentype");
}