Blazor/Razor CSS isolation and @import-ing fonts

What is the correct approach to handling font @imports in Blazor/Razor CSS isolation?

I'm converting my Blazor (.NET6 rc2) project to use CSS isolation, however some of the CSS files have @import statements that reference font files.

As an example, I have these files;

1. login.cshtml - a login page
2. login.cshtml.css - its isolated CSS
3. _LoginLayout.cshtml - the layout page

In the CSS is the following line;

@import url('//rsms.me/inter/inter.css');

That imported file only contains @font-face declarations, with the font files on that //rsms.me server.

However this fails to compile, with;

Error RZ5000 @import rules are not supported within scoped CSS files because the loading order would be undefined. @import may only be placed in non-scoped CSS files.

At this point, I want to make it clear that I'm not that familiar with the behavior of @font-face use and how the directive works- but these are the approaches I've tried.

Approach 1

First, I tried moving the inter.css reference into my layout file, prior to my scoped css-

    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
    <link rel="stylesheet" href="@(nameof(MyProject)).styles.css" />

This compiles, however my scoped CSS doesn't pick up the fonts. My guess is @font-face declarations must be @imported or directly embedded in the CSS file using them.

Approach 2

Next, I tried merging the entire contents of inter.css into my login.cshtml.css, and fixing up the urls, eg.;

@font-face {
    font-family: 'Inter var alt';
    font-weight: 100 900;
    font-style: italic;
    font-named-instance: 'Italic';
    font-display: swap;
    src: url("//rsms.me/inter/font-files/Inter-italic.var.woff2?v=3.19") format("woff2");
}

The URLs resolve however the fonts still aren't getting applied.

What's the right approach here?