V13.6.0 Using package Umbraco.Community.BlockPreview V1.12.2 While I can see the fonts in the RTE flyout, they're not applied to the content rendered in the back office. They are the same fonts as are available to the front end and the blocks are set up to use the same stylesheet as the front end. I also have this in the appsettings.json under umbraco:cms:content

"BlockGrid": {
          "EditorStylesheets": [
            "/css/main.css"
          ]
        }

Any ideas would be appreciated. https://cdn.discordapp.com/attachments/1342868200852819968/1342868201113128980/image.png?ex=67bb32f8&is=67b9e178&hm=89e786a62c60379b9176f126edf48faa123a928095f81d54958b442d8cd21ee7&

Hey @Craig100 it definitely can work but I think it depends how the fonts have been added. It is working in UmBootstrap but I just tested a client site where it is not. https://cdn.discordapp.com/attachments/1342868200852819968/1342913053548744704/image.png?ex=67bb5cbe&is=67ba0b3e&hm=e046069930cbc7e517cbb40cb2b3e5cb62eaa4e5e716f06ac48c33204b1466ef&

Hey @User, I'm sure I've messed up the config somewhere. Usual thing is to get the config in the wrong set of brackets. It's so easily done.

In the Umbraco 13 version of the package, you will need to set the stylesheet in use on the block grid data type itself. When configuring the doc type you want to use as an allowed element, in the same place you set the Custom View, you can add a stylesheet there. If styles are not working correctly, you may need to scope them to ‘:root’ or ‘:host’ first (on mobile currently so can’t remember 100%!)

You mean here? https://cdn.discordapp.com/attachments/1342868200852819968/1343174684274855956/image.png?ex=67bc5067&is=67bafee7&hm=18c900b6ed1b1b9050a4bb52739d1363667a0b588bfd3f3845b10efd7fc12f08&

Yep that’s it! That should do the trick. If that doesn’t work your CSS rules may need to be slightly rescoped

Hmmm, that's the way I always do it, but haven't had to "scope" the css before.

It’s something to do with the fact the preview is loaded in shadow DOM rather than the normal one

Block preview will only preview CSS that is targeting elements that are in the current block grid. Because it uses the shadow root any styles outside are not applied. @rickbutterfield's example is exactly the set up I use for 13 for each block. I think I may have used ::root or ::host for fonts in the past for fonts.

I've added a directive to allow css inclusion in the shadow dom.. could do the same for font inclusion?

csharp
/**
@ngdoc directive
@name umbraco.directives.directive:smIncludeCss
@restrict E
@scope

@description
Use this directive to include a css in the shadow dom.

<h3>Markup example</h3>
<pre>
    <sm-include-css css="/styles/bootstrap-grid.min.css"></sm-include-css>
</pre>

@param {string} css (<code>attribute</code>): This parameter defines the css file to import.
**/

(function () {
    'use strict';

    function smIncludeCssController() {
        let vm = this;
        vm.$onInit = function () {
            vm.text = `@import '${vm.css}?umb__rnd=${Umbraco.Sys.ServerVariables.application.cacheBuster}'`;
        }
    }
    
    let component = {
        template: `<style ng-bind="vm.text"></style>`,
        bindings: {
            css: "@",
        },
        controllerAs: 'vm',
        controller: smIncludeCssController
    };

    angular.module('umbraco.directives').component('smIncludeCss', component);

})();

The fonts that are missing are in the stylesheet that is referenced in the Block's config. There's only one for the whole site. That's what I don't understand. Are you saying I should scope the whole stylesheet to :root?

Which version 13 @Craig100 ? I'll spin up an Umbootstrap and do some tests

these might be of use.. https://jordanbrennan.hashnode.dev/8-ways-to-style-the-shadow-dom , https://gomakethings.com/styling-the-shadow-dom-with-web-components/, https://gomakethings.com/search/?s=shadow%20dom

The fonts files are actually in the project and are added to the CSS via Tailwindcss thus (there area several @font-face sections, just one shown for clarity):-

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    @font-face {
        font-display: swap;
        font-family: Montserrat;
        src: url('/fonts/montserrat/montserrat-v15-latin-regular.woff2') format('woff2'), url('/fonts/montserrat/montserrat-v15-latin-italic.woff2') format('woff2'), url('/fonts/montserrat/montserrat-v15-latin-200.woff2') format('woff2'), url('/fonts/montserrat/montserrat-v15-latin-200italic.woff2') format('woff2'), url('/fonts/montserrat/montserrat-v15-latin-700.woff2') format('woff2'), url('/fonts/montserrat/montserrat-v15-latin-700italic.woff2') format('woff2');
    }
}

Try adding the font family to :host as I've shown. No harm and it should work with the block preview.

Ok, I tried it and the back office font did change, but so did the main site fonts. This is only ok if you want the whole body to be the same font, which I don't. There are many fonts for many things. I tried adding all the fonts as font-families at once but but that just caused mayhem.

html, :host {
    font-family: Montserrat;
    font-family: Museo;
    font-family: Lora;
    font-family: Heebo;
}

It was pretty much any random pick of font for whatever. Also tried a more conventional:

body, :host {
    font-family: Montserrat, Museo, Lora, Heebo;
}

While It didn't affect the front end, the backoffice went Sans-Serif for H's and Serif for paragraphs. So it's not actually loading the fonts, but is making use of the stylesheet as they are the required fallbacks. If it's important how fonts are loaded then why isn't there any documentation about this in the Umbraco Docs? If it's meant to be WYSIWYG then fonts in stylesheets are pretty important, unless it's a package issue, then it's not Umbraco's issue. It's just odd that I see the correct fonts in the property editor flyout panel but not in the main display panel. It picks up all the grid stuff, they're all correctly positioned, etc, but not fonts.

Ok, well at least we know it works. So to get the correct fonts applied to the right elements you could nest them inside :host with a separated list of the classes for each font.

Not sure I know what you mean. I just tried wrapping the whole thing in html, :host {.....}. That didn't go well 😦 Stuff that was fine in the backoffice broke badly.