Using custom web fonts
You can use custom fonts on your pages containing marker.js and those fonts can be specified for text-based markers and are displayed when editing the markup. However, when the annotations are rendered into an image it happens out of the page context and those custom fonts are not rendered. In this article, we will describe how to workaround this issue.
Adding defs
We need to embed the custom font(s) directly into the marker.js' underlying SVG element so that when it's rendered in its own context the font is still present. For this, we add a style element to the SVG's defs section.
Starting with version 2.21 marker.js contains markerArea.addDefs() method for adding SVG defs. So, we create a style element, add CSS into it, and use addDefs() to include it in defs.
IMPORTANT
You should add defs after you call show() as the underlying SVG doesn't exist before you call show().
let style = document.createElementNS('http://www.w3.org/2000/svg', 'style');
style.setAttribute('type', 'text/css');
style.innerHTML = `...`;
markerArea.addDefs(style);Embedding fonts
@importing fonts via a URL won't work either. You will need to embed the font directly into CSS. For this, you need to get a base64 representation of the font. Fortunately, there are tools like this one to generate the whole CSS code with the font embedded.
NOTE
The legality of embedding web fonts directly into your app is out of this article's scope. You should consult the license of each specific font to figure out if this approach is allowed.
You add the CSS generated with the tool into the `style.innerHTML` in the example above and you should be done. Now your custom fonts should show up both during editing and in the final render.