How to load a Google Font for Umbraco Block Grid previews

I had selected my custom stylesheet for the preview Editor appearance, as per the Umbraco documentation. And I added a stylesheet import for the Google Font at the top of my stylesheet, but the import wasn't working:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');

What is going on?

I think the Block Grid preview uses the Shadow DOM to constrain the CSS for each block preview. Each specific block preview cannot expose any styles it creates, nor can it use any styles outside of its own context.

This means that the @import url(...) approach will not work.

Using the package.manifest

I knew that I could not import the stylesheet in my block preview, so I next tried to import the Google Font using a custom package.manifest with a CSS array, much like Setting up a plugin for a custom property editor:

{
  "name": "RSK.GridBlocks",
  "css": ["https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap"]
}

This didn't end well - there were lots of errors in the Chrome developer console. It also stopped the Umbraco backoffice from loading completely.

But then I had a moment of clarity...

I could not load a remote stylesheet using the package.manifest, but maybe I could load a local stylesheet that could import the remote stylesheet?

I updated my package.manifest like so:

{
  "name": "RSK.GridBlocks",
  "css": ["/App_Plugins/RSK.GridBlocks/_fonts.css"]
}

And then created a new _fonts.css file with the Google Fonts stylesheet import:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');

Umbraco loaded the stylesheet, and subsequently imported the Google Font, so I could now use the font in my custom stylesheet for my block preview.

Let me know on Twitter if you know a better approach to this. But hopefully this will help you too!