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
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()
commenting pn.config.raw_css = [css_style]
and uncommenting # _stylesheets = [css_style]
make it broken