diff --git a/app/assets/css/ui_fonts.css b/app/assets/css/ui_fonts.css
new file mode 100644
index 0000000..4f319fc
--- /dev/null
+++ b/app/assets/css/ui_fonts.css
@@ -0,0 +1,12 @@
+.font-pubsans {
+    --font-sans: "Public Sans", sans-serif;
+}
+.font-geist {
+    --font-sans: "Geist One", sans-serif;
+}
+.font-nunito {
+    --font-sans: "Nunito", sans-serif;
+}
+.font-grot {
+    --font-sans: "Space Grotesk", sans-serif;
+}
\ No newline at end of file
diff --git a/app/composables/ui_color.ts b/app/composables/ui_color.ts
deleted file mode 100644
index 4b8d354..0000000
--- a/app/composables/ui_color.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import type {CookieRef} from "#app";
-
-export function ui_color_cookie(): CookieRef<string> {
-
-    const c = useCookie("ui_color",{
-        default: () => "green",
-
-    });
-    watch(c, (newVal, oldVal) => {
-        // remove old class (if it's been put)
-        if (oldVal != undefined) document.body.classList.remove("ui-" + oldVal);
-
-        // add new class
-        document.body.classList.add("ui-" + newVal);
-    }, { immediate: true})
-
-    return c;
-
-}
\ No newline at end of file
diff --git a/app/composables/ui_cookies.ts b/app/composables/ui_cookies.ts
new file mode 100644
index 0000000..625eb57
--- /dev/null
+++ b/app/composables/ui_cookies.ts
@@ -0,0 +1,22 @@
+import type {CookieRef} from "#app";
+
+function ui_cookie(name:string, def:string,prefix:string): CookieRef<string> {
+
+    const c = useCookie(name,{
+        default: () => def,
+
+    });
+    watch(c, (newVal, oldVal) => {
+        // remove old class (if it's been put)
+        if (oldVal != undefined) document.body.classList.remove(prefix + oldVal.toLowerCase());
+
+        // add new class
+        document.body.classList.add(prefix + newVal.toLowerCase());
+    }, { immediate: true})
+
+    return c;
+
+}
+
+export function ui_color_cookie() { return ui_cookie("ui_color","green","ui-"); }
+export function ui_font_cookie() { return ui_cookie("ui_font","pubsans","font-"); }
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 5c1c8e5..a4ebbd8 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,10 +1,11 @@
 import tailwindcss from "@tailwindcss/vite";
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
+// @ts-ignore
 export default defineNuxtConfig({
     compatibilityDate: '2025-07-15',
     devtools: {enabled: true},
-    css: ['@/assets/css/global.css', '@/assets/css/ui_colors.css' ],
+    css: ['@/assets/css/global.css', '@/assets/css/ui_colors.css', /*'@/assets/css/ui_fonts.css' */],
     modules: [
       '@nuxt/image',
       '@nuxt/ui',