fix(adobe): use font names instead of slugs

nuxt · Mar 12, 2024 · 641b311 · 641b311
1 parent f1755ce
commit 641b311
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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 []