/*  regular */
@font-face {
  font-display: optional;
  font-family: 'Lota Grotesque';
  font-weight: normal;
  font-display: swap;
  src: url('lota-regular.woff2') format('woff2');
}
/* regular alias for svg files */
@font-face {
  font-display: optional;
  font-family: 'LotaGrotesque-Regular';
  font-weight: normal;
  font-display: swap;
  src: url('lota-regular.woff2') format('woff2');
}
/* semibold */
/* wider than the regular font */
@font-face {
  font-display: optional;
  font-family: 'Lota Grotesque';
  font-weight: 600;
  font-display: swap;
  src: url('lota-semibold.woff2') format('woff2');
}
/* semibold alias */
@font-face {
  font-display: optional;
  font-family: 'LotaGrotesque-SemiBold';
  font-weight: 600;
  font-display: swap;
  src: url('lota-semibold.woff2') format('woff2');
}
/* bold */
/* note: can't find any noticable difference between this and semibold */
@font-face {
  font-display: optional;
  font-family: 'Lota Grotesque';
  font-weight: 700;
  font-display: swap;
  src: url('lota-bold.woff2') format('woff2');
}
/* bold alias */
@font-face {
  font-display: optional;
  font-family: 'LotaGrotesque-Bold';
  font-weight: 700;
  font-display: swap;
  src: url('lota-bold.woff2') format('woff2');
}

@font-face {
  font-display: optional;
  font-family: 'Lota Bespoke';
  font-weight: 600;
  font-display: swap;
  src: url('lota-bespoke.woff2') format('woff2');
}