diff --git a/exampleSite/tailwind-plugin/tw-theme.js b/exampleSite/tailwind-plugin/tw-theme.js
index 8722594..c9ea24b 100644
--- a/exampleSite/tailwind-plugin/tw-theme.js
+++ b/exampleSite/tailwind-plugin/tw-theme.js
@@ -5,9 +5,19 @@ const themePath = path.join(__dirname, "../data/theme.json");
 const themeRead = fs.readFileSync(themePath, "utf8");
 const themeConfig = JSON.parse(themeRead);
 
+// Find font name from font string
 const findFont = (fontStr) =>
   fontStr.replace(/\+/g, " ").replace(/:[^:]+/g, "");
 
+// Set font families dynamically, filtering out 'type' keys
+const fontFamilies = Object.entries(themeConfig.fonts.font_family)
+  .filter(([key]) => !key.includes("type"))
+  .reduce((acc, [key, font]) => {
+    acc[key] =
+      `${findFont(font)}, ${themeConfig.fonts.font_family[`${key}-type`] || "sans-serif"}`;
+    return acc;
+  }, {});
+
 module.exports = plugin.withOptions(() => {
   return ({ addBase, addUtilities }) => {
     const rootVars = {};
@@ -33,11 +43,9 @@ module.exports = plugin.withOptions(() => {
       rootVars[`--text-${k}`] = v;
     });
 
-    // Set font families
-    rootVars["--font-primary"] =
-      `${findFont(themeConfig.fonts.font_family.primary)}, ${themeConfig.fonts.font_family.primary_type}`;
-    rootVars["--font-secondary"] =
-      `${findFont(themeConfig.fonts.font_family.secondary)}, ${themeConfig.fonts.font_family.secondary_type}`;
+    Object.entries(fontFamilies).forEach(([key, font]) => {
+      rootVars[`--font-${key}`] = font;
+    });
 
     // Define color groups
     const groups = [
@@ -57,6 +65,7 @@ module.exports = plugin.withOptions(() => {
       });
     });
 
+    // Add variables to root
     addBase({ ":root": rootVars });
 
     // Generate color utilities
@@ -79,11 +88,11 @@ module.exports = plugin.withOptions(() => {
       });
     });
 
-    // Generate font utilities
-    const fontUtils = {
-      ".font-primary": { fontFamily: "var(--font-primary)" },
-      ".font-secondary": { fontFamily: "var(--font-secondary)" },
-    };
+    // Generate font utilities dynamically
+    const fontUtils = {};
+    Object.keys(fontFamilies).forEach((key) => {
+      fontUtils[`.font-${key}`] = { fontFamily: `var(--font-${key})` };
+    });
     Object.keys(fontSizes).forEach((k) => {
       fontUtils[`.text-${k}`] = { fontSize: `var(--text-${k})` };
     });