Craig100
02/22/2025, 2:38 PM"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&Craig100
02/22/2025, 2:47 PMDean Leigh
02/22/2025, 5:37 PMCraig100
02/22/2025, 6:49 PMrickbutterfield
02/22/2025, 7:39 PMrickbutterfield
02/23/2025, 10:57 AMCraig100
02/23/2025, 11:03 AMCraig100
02/23/2025, 11:03 AMCraig100
02/23/2025, 11:04 AMCraig100
02/23/2025, 11:04 AMrickbutterfield
02/23/2025, 11:05 AMDean Leigh
02/24/2025, 6:36 AMMike Chambers
02/24/2025, 8:39 AMcsharp
/**
@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);
})();
Craig100
02/24/2025, 1:10 PMDean Leigh
02/24/2025, 1:20 PMDean Leigh
02/24/2025, 4:28 PMcss
body, :host {
@include rem-fallback(font-size, 1);
color: $grey-darkest;
font-family: $font-03;
font-weight: 400;
line-height: 1.5;
}
Where $font-03 is an Adobe Typekit font.
That should cover you for shadow dom.Mike Chambers
02/24/2025, 7:18 PMCraig100
02/24/2025, 8:19 PM@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');
}
}
Dean Leigh
02/24/2025, 8:22 PMCraig100
02/24/2025, 10:04 PMhtml, :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.Dean Leigh
02/24/2025, 10:20 PMCraig100
02/25/2025, 12:08 AMCraig100
02/25/2025, 12:09 AM