Custom font for panel custom components

Panel
1

Hello,

I was developping a JSComponent and was referencing a custom font-family inside it
For a while I thought adding something like

@font-face {
    font-family:"codicon";
    src: url("https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/esm/vs/base/browser/ui/codicons/codicon/codicon.ttf") format("truetype");
}

in the _stylesheets attributes would work
however I noticed it seems ignored in the shadowdom

so I ended to add it to pn.config.raw_css = [css_style]
Is it the recommended way?
sticking to the doc it does not seems to

image
image1029×104 8.15 KB

Here is a MRE of the components

import panel as pn

css_style = r"""
@font-face {
    font-family:"codicon";
    src: url("https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/esm/vs/base/browser/ui/codicons/codicon/codicon.ttf") format("truetype");
}
.icon {
    font-family: "codicon";
}
.icon::before {
    content: "\ea71";
}
"""

pn.config.raw_css = [css_style]

class CustomFontIcon(pn.custom.JSComponent):
    # _stylesheets = [css_style]
    _esm = """
        export function render({model, el}) {
            const container = document.createElement("span");
            container.classList = ["icon"]
            container.textContent = "Test"
            return container
        }
    """


CustomFontIcon().servable()

image
commenting pn.config.raw_css = [css_style] and uncommenting # _stylesheets = [css_style] make it broken
image