Using custom fonts on lables

[wx007]

Hi!

Can anyone tell me what I'm doing wrong in the following code?
The code's purpose is to display text labels in a custom font.

Fonts were converted to .bpf files (per maplibre docs) and stored in the SvelteKit project at "static/fonts/B612 Mono Regular/"
The vanilla JS version of this code works fine so I suspect it has something to do with SK not locating the font but I can't figure it out.
Has anyone had success using custom fonts with Svelte-Maplibre?

Any suggestions are appreciated.
Thank you!

{#if countryLabels}
   <GeoJSON id="countryLabels" data={countryLabels}>
       <SymbolLayer
          id="countryLabelsSymbolLayer"
          layout={{
             "text-field":['get', 'country'],
             "text-font": ['B612 Mono Regular'],  // font .bpf files located in the SvelteKit "static/fonts/B612 Mono Regular" folder.
             "text-size": 14
           }}
           paint={{"text-color": "#FF0000"}}
      />
   </GeoJSON>
{/if}

This is a sample of the countryLabels data:

{
   "type": "FeatureCollection",
   "features": [
      {
         "type": "Feature",
         "geometry": {
            "type": "Point",
            "coordinates": [35.0, 33.0]
         },
         "properties": {
            "country": "Cyprus"
         }
      },
     etc...

[dimfeld]

Hm I have no experience using custom fonts with MapLibre, but my first intuition would be to look at the network tab in the inspector. Then you can see if it's requesting the font at all, and if so which URL it's attempting to fetch and what is coming back from that.

[wx007]

Ok, I figured it out. Here's what you do to get custom fonts on your svelte-maplibre map.

1. Generate glyph files from your standard .otf or .ttf font. Use this site:
   https://maplibre.org/font-maker/

2. Download and unzip the generated files. Copy the complete unzipped contents into /static/fonts

3. Add the server location of the font(s) to your map style definition.
   The "glyphs" line is key. Leave it as-is.
   This tells SvelteKit fonts specified by the layout's "text-font" property are located inside the SvelteKit project under static/fonts

   const myMapStyle = {
      "version": 8,
      "glyphs": "fonts/{fontstack}/{range}.pbf",  
      "sources": {...},
      "layers": [...], 
     }

4. In your Symbol layer (must be a symbol layer), specify the font name using the "text-font" property. In this case I used "B612 Mono Regular". Note this is the exact name of a folder inside the fonts folder. If you copied the contents of the downloaded zip file as-is, you will have a folder for each font style – one for Regular, one for Bold, one for Italic, etc.
   If no text labels show up on your map make sure the "text-field" property is pulling the correct field name from your json/geojson data.

<GeoJSON id="countryCenters" data={countryCenters}>
    <SymbolLayer
        id="countryLabels"
        layout={{
             "text-field":['get', 'country'],
             "text-font": ['B612 Mono Regular'],
             "text-size": 14,
             "text-variable-anchor": [ "top",  "bottom",  "left",  "right"],
             "text-radial-offset": 0.7,
             "text-justify":  "auto",
             "text-overlap": "never",
         }}
         paint={{
              "text-color": theThemeStore.primary,
         }}
         filter={ [ "all", [">", ["zoom"], 2.75], ["<=", ["zoom"], 3.5], ] }
      />
</GeoJSON>

Good luck!
If I discover any other information I'l update this post.
Peace!

PS. I came across a site that mentioned the glyph path does NOT require the absolute full URL in DEV but it does in PROD. I cannot confirm this as I haven't pushed to PROD yet. The Maplibre Glyphs docs mention the absolute path is necessary but it's assuming vanilla JS. I'm not familiar enough with SK to know if it still applies or if SK does some path wrangling behind the scenes. If someone more familiar with SK deployments knows please comment.
https://maplibre.org/maplibre-style-spec/glyphs/