wip

plugin-src/translators/text/custom/index.ts

@@ -1 +1,2 @@
 export * from './translateCustomFont';
+export * from './translateFontVariantId';

plugin-src/translators/text/custom/translateCustomFont.ts

@@ -1,17 +1,19 @@
 import slugify from 'slugify';
 
+import { translateFontVariantId } from '@plugin/translators/text/custom';
+
 import { FontId } from '@ui/lib/types/text/textContent';
 
 /**
  * @TODO: implement custom font loading for Penpot
  */
-export const translateCustomFont = (fontName: FontName): FontId | undefined => {
+export const translateCustomFont = (fontName: FontName, fontWeight: number): FontId | undefined => {
   // For now display a message in the UI, so the user knows
   // that the file is using a custom font not present in Penpot
   figma.ui.postMessage({ type: 'FONT_NAME', data: fontName.family });
 
   return {
     fontId: slugify(fontName.family.toLowerCase()),
-    fontVariantId: fontName.style.toLowerCase().replace(/\s/g, '')
+    fontVariantId: translateFontVariantId(fontName, fontWeight)
   };
 };

plugin-src/translators/text/custom/translateFontVariantId.ts

@@ -0,0 +1,5 @@
+export const translateFontVariantId = (fontName: FontName, fontWeight: number) => {
+  // check match by style and weight
+  const italic = fontName.style.toLowerCase().includes('italic') ? 'italic' : 'normal';
+  return `${italic}-${fontWeight.toString()}`;
+};

plugin-src/translators/text/translateFontId.ts

@@ -8,6 +8,6 @@ export const translateFontId = (fontName: FontName, fontWeight: number): FontId
   return (
     translateGoogleFont(fontName, fontWeight) ??
     translateLocalFont(fontName, fontWeight) ??
-    translateCustomFont(fontName)
+    translateCustomFont(fontName, fontWeight)
   );
 };