Rich Text Editor (TipTap) and Custom fonts

[sm-rob (Robert Shaw)]

Hello.

I am trying to make the RTE as close to the front end as possible to give the user the best experience. To achieve this, I am wanting to somehow use the fonts we use on the front end, which belong in a wwwroot/assets/fonts folder.

In the RTE settings, I include a CSS file (wwwroot/css/rte.css), and this allows me to apply some styles to things in the RTE such as blockquotes, headings, etc..

However, the one bit I am struggling with is how to use my fonts.

In my rte.css file I am using @font-faceto declare my font:

@font-face {
  font-family: "Gilroy";
  src: url('../assets/fonts/GilroyW05-Regular.woff2') format('woff2');
  font-weight: 400;
}

and then trying to use that like this:

umb-tiptap-toolbar + #editor {
    font-family: "Gilroy", Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 26px;
    font-weight: 400;
}

Is there a specific way I would need to load these fonts into the back office?

Thank you in advance,
Rob

[mistyn8 (Mike Chambers)]

This might help?

The quickest way to add a custom font to the new Umbraco backoffice - Rick Butterfield

[sm-rob (Robert Shaw)]

Thank you so much @mistyn8. I will give that a whirl. Not sure how I missed that one.

[sm-rob (Robert Shaw)]

Hello @mistyn8 - thanks for that link. Worked a charm.

For reference this is what I did

Structure:

• App_Plugins (Folder)
  • SM.BackOfficeLoader (Folder)
    • index.js
    • umbraco-package.json

index.js

export const onInit = () => {
    let styleEl = document.createElement('style');
        
    styleEl.setAttribute("type", "text/css");

    styleEl.innerHTML = `@font-face {
        font-family: "Gilroy";
        src: url('/assets/fonts/GilroyW05-Regular.woff2') format('woff2');
        font-weight: 400;
        font-display: swap;
        text-rendering: optimizeLegibility;
    }`
        
    document.head.appendChild(styleEl);
}

umbraco-package.json

{
    "name": "SM - BackOfficeLoader",
    "alias": "SM.BackOfficeLoader",
    "extensions": [
        {
         "type": "backofficeEntryPoint",
         "alias": "SM.BackOfficeLoaderEntryPoint",
         "js": "/App_Plugins/SM.BackOfficeLoader/index.js"
        }
    ]
}

Then in my rte.css file (wwwroot/css/rte.css) I can reference the “Gilroy” font to the editor which makes the experience for the user (in my opinion) a lot more accurate to what they’ll see on the front end.

Thanks again,
Rob