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
Looks good2050×1413 101 KB

But in the Block Grid it looks like this:

No fonts
No fonts1395×1258 46.9 KB

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: How to load a Google Font for Umbraco Block Grid previews | Rock Solid Knowledge

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.