Hey hey! That list of ideas didn’t come from me, but the Polypane blog does give an example that uses @font-face in the new query:

@media (prefers-reduced-data: no-preference) {
  @font-face {
    font-family: 'Inter';
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
    font-named-instance: 'Regular';
    src: url('Inter-roman.var.woff2') format('woff2');
  }
}

body {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
               Segoe UI, Ubuntu, Roboto, Cantarell, Noto Sans, sans-serif,
               'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

Will that actually work? I don’t know. It’s up to browsers to decide when this becomes a formal recommendation and starts to be adopted.

That said, most browsers will only download the font when it’s called (i.e. declared). So, Polypane’s suggestion here is that @font-face can still be used outside of the media query, then the font itself called on the body element:

@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  font-named-instance: 'Regular';
  src: url('Inter-roman.var.woff2') format('woff2');
}

body {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
               Segoe UI, Ubuntu, Roboto, Cantarell, Noto Sans, sans-serif,
               'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

@media (prefers-reduced-data: reduce) {
  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI,
                 Ubuntu, Roboto, Cantarell, Noto Sans, sans-serif,
                 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  }
}

Hope that clears things up! Definitely check out the Polypane write-up for the full scoop.

Conditionally load fonts. As in, make a @font-face declaration then call the font on the body, once for users with no-preference to get the custom font, and again for users with reduced to get a lighter stack.

First, because I am not really sure what your idea is with “call the font on the body” – but also, will media queries level 5 allow us to nest @font-face inside Mediaqueries? Because it doesn’t work right now