feat: make font family selectable

examples/snowbox/index.js

@@ -62,10 +62,17 @@
 				default: '0 10px 10px 10px',
 			},
 		},
+		typography: {
+			font: {
+				family: {
+					default: 'Consolas',
+				},
+			},
+		},
 	},
 }
 
 // TODO: Re-enable with isSelectable
 /*
 // arbitrary condition for testing
 const isEvenId = (mmlid) => Number(mmlid.slice(-1)) % 2 === 0
@@ -85,7 +92,7 @@
 		colorScheme,
 		startCenter: [573364, 6028874],
 		layers: [
 			// TODO: Add internalization to snowbox
 			{
 				id: basemapId,
 				visibility: true,
@@ -165,14 +172,14 @@
 						stroke: '#FFFFFF',
 						fill: '#333333',
 					},
 					// TODO(dopenguin): Has some HMR issues, needs to be fixed
 					// isSelectable: isReportSelectable,
 				},
 			],
 			clusterClickZoom: true,
 		},
 		// theme: dataportTheme,
 		/*
 			TODO(dopenguin): Surrounding application should be able give information about dark or light mode via update of a state parameter; light mode by default
 		 */
 		locales: [
@@ -261,7 +268,7 @@
 				key: 'coordinate',
 			},
 		],
 		// TODO: Check if this works when addressSearch is implemented
 		addressTarget: {
 			plugin: 'addressSearch',
 			key: 'selectResult',
@@ -286,7 +293,7 @@
 			},
 		],
 		menus: [
 			// TODO: Delete the mock plugins including the components once the correct plugins have been implemented
 			[
 				{
 					plugin: pluginGeoLocation({

src/core/index.ts

@@ -9,7 +9,6 @@
  */
 /* eslint-enable tsdoc/syntax */
 
-import '@kern-ux/native/dist/fonts/fira-sans.css'
 import { defineCustomElement } from 'vue'
 
 import PolarContainer from './components/PolarContainer.ce.vue'

src/core/types/theme.ts

@@ -14,10 +14,22 @@ export interface KernThemeTree {
 /**
  * Describes the theming options of KERN.
  * The exhaustive list of parameters is documented in `@kern-ux/native`.
+ *
+ * **About fonts**
+ *
+ * Please mind that setting a value to `kern.typography.font.family.default`
+ * will stop the client from loading the font `Fira Sans` used in the KERN
+ * design system. 'inherit' will not work as a value due to technical
+ * limitations of the ShadowDOM. To inherit whatever would naturally arrive or
+ * is styled on the host node, use `''` (empty string).
+ * You may also set `"Fira Sans", sans-serif` (the default value) to this
+ * variable in case you already have the font loaded to prevent loading it
+ * twice.
  */
 export interface KernTheme {
 	color: KernThemeTree
 	metric: KernThemeTree
+	typography: KernThemeTree
 }
 
 /**

src/core/utils/loadKern.ts

@@ -37,6 +37,11 @@ export function loadKern(host: ShadowRoot, theme: Partial<KernTheme> = {}) {
 	`)
 	host.adoptedStyleSheets.push(kernSheet)
 
+	// @ts-expect-error | It's fine, we're getting `undefined` for an access on string, too.
+	if (typeof theme.typography?.font?.family?.default !== 'undefined') {
+		void import('@kern-ux/native/dist/fonts/fira-sans.css')
+	}
+
 	const kernTheme = buildKernTheme(theme)
 	host.adoptedStyleSheets.push(kernTheme)
 }