/* The two typefaces, self-hosted.
 *
 * NOT linked from Google. Three reasons, all of them practical:
 *   * the content security policy allows stylesheets from 'self' only, so a
 *     CDN <link> would simply be blocked and the text would fall back
 *   * an installed app has to render correctly offline, and a font it cannot
 *     fetch is a page that reflows the moment somebody loses signal
 *   * nothing about who is browsing this dating app gets sent to a third
 *     party just to draw a heading
 *
 * Both are variable fonts, so one file each covers every weight from 400 to
 * 700 rather than four separate downloads. Latin subset only. 113 KB for the
 * pair, cached by the service worker on first visit and never fetched again.
 */

/* Fraunces: the headings. A warm soft-serif that reads as though a person
   wrote it, which is the tone this app wants and is the opposite of the cold
   geometric sans every other dating app uses. */
@font-face {
  font-family: "Fraunces";
  src: url("/static/fonts/fraunces.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  /* Show the fallback immediately and swap when the file lands. A blank
     heading for 300ms is worse than one that changes shape once. */
  font-display: swap;
}

/* Inter: everything else. Drawn for screens at small sizes, which matters
   here because the interface leans on a lot of 11px uppercase labels and
   tabular numbers in the match score. */
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Figtree: everything now. Chosen for phones: open letter shapes, a tall
   x-height and a clear bold, so text stays easy to read at small sizes and
   in a hurry. A variable font, 300 to 900 in one 20 KB file, Latin only,
   from Google Fonts' own files and served from here for the same three
   reasons as above. Fraunces stays for the Pendo wordmark only; Inter is no
   longer used, and is kept here only so nothing breaks while caches turn
   over. */
@font-face {
  font-family: "Figtree";
  src: url("/static/fonts/figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}