Step 1: Add this script in all the pages where the glyphsmap should be presented in HEAD/BODY
<script type="module" crossorigin src="https://run.glyphsmap.com/here.js"></script>Step 2: Place the glyphsmap where you want it in your page
A. Upload your font file ttf/otf/woff/woff2 anywhere online and paste the URL here:
B. Add the glyphsmap wherever you want in your page:
<div glyphsmap-from-font-url="/fonts/FtPilKahol/FtPilKahol.ttf"></div>Alternative:
<div glyphsmap-from-font-url style="display:none;">/fonts/FtPilKahol/FtPilKahol.ttf</div>Step 3: Check that its working
Step 4 (Optional): Style it however you want!
Using CSS you can style it.
This is the base SCSS and you can edit it as you like. Note that you might need to add !important to some values if they are already set.
[glyphsmap-from-font-url] .glyphsmap-container {
gap: 3px !important;
color: #003878;
}
[glyphsmap-from-font-url] .glyphsmap-container .glyphsmap-item {
font-size: 1.5em !important;
}