From 641b311190a844b094b7b81c5acf23a7302814b7 Mon Sep 17 00:00:00 2001
From: qwerzl <me@qwerzl.me>
Date: Tue, 12 Mar 2024 14:58:43 +0800
Subject: [PATCH] fix(adobe): use font names instead of slugs

---
 playground/nuxt.config.ts             | 2 +-
 playground/pages/providers/adobe2.vue | 2 +-
 src/providers/adobe.ts                | 9 ++++++---
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
index acb27a6..d650bba 100644
--- a/playground/nuxt.config.ts
+++ b/playground/nuxt.config.ts
@@ -17,7 +17,7 @@ export default defineNuxtConfig({
       { name: 'CustomGlobal', global: true, src: '/font-global.woff2' },
       { name: 'Oswald', fallbacks: ['Times New Roman'] },
       { name: 'Aleo', provider: 'adobe'},
-      { name: 'barlow-semi-condensed', provider: 'adobe' }
+      { name: 'Barlow Semi Condensed', provider: 'adobe' }
     ],
     adobe: {
       id: ['sij5ufr', 'grx7wdj'],
diff --git a/playground/pages/providers/adobe2.vue b/playground/pages/providers/adobe2.vue
index 5736d7e..b54ae4a 100644
--- a/playground/pages/providers/adobe2.vue
+++ b/playground/pages/providers/adobe2.vue
@@ -6,6 +6,6 @@
 
 <style scoped>
 div {
-  font-family: 'barlow-semi-condensed', sans-serif;
+  font-family: 'Barlow Semi Condensed', sans-serif;
 }
 </style>
diff --git a/src/providers/adobe.ts b/src/providers/adobe.ts
index 2be8db7..2645f03 100644
--- a/src/providers/adobe.ts
+++ b/src/providers/adobe.ts
@@ -88,7 +88,7 @@ async function initialiseFontMeta (kitId: string | string[]) {
   })
   for (const kit in fonts.kit) {
     for (const family in fonts.kit[kit]!.families) {
-      familyMap.set(fonts.kit[kit]!.families[family]!.slug, fonts.kit[kit]!.families[family]!.id)
+      familyMap.set(fonts.kit[kit]!.families[family]!.name, fonts.kit[kit]!.families[family]!.id)
     }
   }
 }
@@ -101,7 +101,7 @@ async function getFontDetails (family: string, variants: ResolveFontFacesOptions
   variants.weights = variants.weights.map(String)
 
   for (const kit in fonts.kit) {
-    const font = fonts.kit[kit]!.families.find(f => f.slug === family)!
+    const font = fonts.kit[kit]!.families.find(f => f.name === family)!
     if (!font) { continue }
 
     const styles: string[] = []
@@ -116,7 +116,10 @@ async function getFontDetails (family: string, variants: ResolveFontFacesOptions
     }
     if (styles.length === 0) { continue }
     const css = await fontCSSAPI(`${fonts.kit[kit]!.id}.css`)
-    return addLocalFallbacks(family, extractFontFaceData(css, family))
+
+    // Adobe uses slugs instead of names in its CSS to define its font faces, so we need to first transform names into slugs.
+    const slug = family.toLowerCase().split(' ').join('-')
+    return addLocalFallbacks(family, extractFontFaceData(css, slug))
   }
 
   return []