Update shell.handlebars - multiple fonts + local

Explanation of Changes
Handling Multiple Fonts:

The font_custom variable is treated as an array, and for each font, a @font-face rule is generated if the font URL starts with / (indicating a local font).
The CSS variables are dynamically named using the font name, replacing spaces and slashes to ensure valid CSS variable names.

Google Fonts:

Google Fonts are handled by filtering the font_custom array to include only those fonts that do not start with /.
Multiple Google Fonts are included by iterating over this filtered list and generating the necessary <link> tags.
CSS Variables:

CSS variables are created for each font in the :root selector. Local fonts will have _custom appended to their names to avoid conflicts with Google Fonts.
This setup enables the registration and usage of multiple fonts, both locally stored and from Google Fonts, ensuring broad compatibility and flexibility for the user.

Author: amrutadotorg

sqlpage/templates/shell.handlebars

@@ -10,17 +10,48 @@
         <link rel="manifest" href="{{manifest}}">
     {{/if}}
     <link rel="stylesheet" href="{{static_path 'sqlpage.css'}}">
-   {{#each (to_array css)}}
+    {{#each (to_array css)}}
         {{#if this}}
             <link rel="stylesheet" href="{{this}}">
         {{/if}}
-   {{/each}}
+    {{/each}}
+
+    {{#if font_custom}}
+        <style>
+            {{#each font_custom}}
+                {{#if (startsWith this "/")}}
+                    @font-face {
+                        font-family: '{{this}}_custom';
+                        src: url('{{this}}.woff2') format('woff2'),
+                             url('{{this}}.woff') format('woff'),
+                             url('{{this}}.ttf') format('truetype'),
+                             url('{{this}}.otf') format('opentype'),
+                             url('{{this}}.eot') format('embedded-opentype'),
+                             url('{{this}}.svg#{{this}}_custom') format('svg');
+                    }
+                {{/if}}
+            {{/each}}
+        </style>
+
+        {{!-- Handling Google Fonts --}}
+        {{#each (filter font_custom (lambda font (not (startsWith font "/"))))}}
+            <link rel="preconnect" href="https://fonts.googleapis.com">
+            <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+            <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family={{this}}&display=fallback">
+        {{/each}}
 
-   {{#if font}}
-        <link rel="preconnect" href="https://fonts.googleapis.com">
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family={{font}}&display=fallback">
-        <style>:root { --tblr-font-sans-serif: '{{font}}', Arial, sans;}</style>
+        <style>
+            :root {
+                {{#each font_custom}}
+                    {{!-- Local fonts will have _custom appended to their names --}}
+                    {{#if (startsWith this "/")}}
+                        --tblr-font-{{replace this "/" "-"}}: '{{this}}_custom', Arial, sans;
+                    {{else}}
+                        --tblr-font-{{replace this " " "-"}}: '{{this}}', Arial, sans;
+                    {{/if}}
+                {{/each}}
+            }
+        </style>
     {{/if}}
 
     <script src="{{static_path 'sqlpage.js'}}" defer></script>