/* The three faces the design uses, and no more.
   font-display: swap so text is readable while the face loads — on a site
   about a decision people are nervous about, invisible text is worse than
   text in the fallback for 200ms. The fallbacks are chosen for similar
   metrics, so the swap moves the page as little as possible. */

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Karla";
  src: url("fonts/karla-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Karla";
  src: url("fonts/karla-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}