Custom Fonts not working in Block Grid

Questions
1

I have fonts set in /css/rte.css and was hoping to use those for the RTE and for rendering text in Block Grid components in the back office. It looks great in the RTE

Looks good

But in the Block Grid it looks like this:

No fonts

Any idea why it would work in one and not the other? This is on all my block components, not just the “Rich Text” one.

This is a companion discussion topic for the original entry at https://our.umbraco.com/forum/114765-custom-fonts-not-working-in-block-grid
2

Hey for anyone having this specific issue, I found the solution.
This link should get you started, I’ll elaborate a bit more: https://www.rocksolidknowledge.com/articles/how-to-load-a-google-font-for-umbraco-block-grid-previews

Essentially the issue is that Umbraco must be blocking the requests being made in the backoffice, as it may be classifying it as malicious or potentially malicious. So what you have to do is load a css file through a package.json file.
Here are the elaborated instructions, i found the guy’s instructions to be a bit vague:

  1. Create a Folder inside App_Plugins named something like BackOfficeFonts.
  2. Create a file inside called package.json.
  3. Create a folder and file next to the json file: css/_fonts.css
  4. Paste the following into package.json:
{
  "name": "BOFonts",
  "css": [
    "~/App_Plugins/BackOfficeFonts/css/_fonts.css"
  ]
}
  1. And inside _fonts.css you can now use your @import statements, wherever that may be from.

This is how i fixed it, hopefully it works for anyone encountering this issue.