Rich Text Editor (TipTap) and Custom fonts

Questions
, ,
4

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

2 Likes