Como agrego Brandon Grotesque como fuente en Bookly

bookly.css

/* primero crea una carpeta, vas a necesitarla para guardar las fuentes
luego ocupas la ruta para llamar a cada archivo fuente, en mi caso, es '/assets/fonts/' */

@font-face{
  font-family: Brandon;
  font-weight: 200;
  src: url(/assets/fonts/Brandon_light.otf) format("opentype")
}

@font-face{
  font-family: Brandon;
  font-weight: 400;
  font-style: normal;
  src: url(/assets/fonts/Brandon_reg.otf) format("opentype")
}
@font-face{
  font-family: Brandon;
  font-weight: 500;
  src: url(/assets/fonts/Brandon_med.otf) format("opentype")
}

/* Nota los 'pesos' asociados a cada fuente. 400 es lo mismo que
   Regular y 700 es lo mismo que Bold. Por eso le dimos al Medium
   un valor de 500. */

@font-face {
  font-family: Brandon;
  font-weight: 700;
  font-style: bold;
  src: url(/assets/fonts/Brandon_bld.otf) format("opentype")
}

/* Luego puedes ocupar la fuente como cualquier otra familia.
   Nota que el nombre 'Brandon' coincide con el que le di a la
   fuente más arriba. */

body {
  font-family:Brandon,sans-serif;
  color:#000;
}

/* Nota que le pongo sans-serif al final para que si por algún
   motivo la fuente se no logra cargar, no muestre una fuente
   con serifas como Times, sino algo que se vea bien. */

.en-negrita {
  font-family: Brandon, sans-serif;
  font-weight: bold;
}

/* También puedo usar los valores numéricos */

.no-tan-negrita {
  font-family: Brandon, sans-serif;
  font-weight: 500;
}

.una-clase-light {
  font-family: Brandon, sans-serif;
  font-weight: 200;
}