@font-face {
  font-family: 'FadedPencil';
  src: url('/assets/fonts/fadedpencil.woff2') format('woff2'),
       url('/assets/fonts/fadedpencil.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Monogramica Script';
  src: url('/assets/fonts/monogramica-script.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

html.fonts-pending .magnolia-title,
html.fonts-pending .magnolia-hero__names,
html.fonts-pending .magnolia-countdown__num,
html.fonts-pending .magnolia-footer__names,
html.fonts-pending .magnolia-rsvp-success__title,
html.fonts-pending .magnolia-modal__title,
html.fonts-pending .magnolia-monogram:not(.magnolia-monogram--logo) {
  visibility: hidden;
}

html.fonts-ready .magnolia-title,
html.fonts-ready .magnolia-hero__names,
html.fonts-ready .magnolia-countdown__num,
html.fonts-ready .magnolia-footer__names,
html.fonts-ready .magnolia-rsvp-success__title,
html.fonts-ready .magnolia-modal__title,
html.fonts-ready .magnolia-monogram {
  visibility: visible;
}

html.fonts-pending .magnolia-monogram--logo,
.magnolia-monogram--logo {
  visibility: visible;
}

.magnolia-title,
.magnolia-hero__names,
.magnolia-countdown__num,
.magnolia-footer__names,
.magnolia-rsvp-success__title,
.magnolia-modal__title {
  font-family: 'FadedPencil', Georgia, serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

.magnolia-monogram,
.magnolia-monogram__frame,
.magnolia-monogram__frame::before,
.magnolia-monogram__letters {
  font-family: 'Monogramica Script', cursive;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}