diff --git a/plugin-src/translators/text/custom/index.ts b/plugin-src/translators/text/custom/index.ts
index 5e609ae3..39bb5855 100644
--- a/plugin-src/translators/text/custom/index.ts
+++ b/plugin-src/translators/text/custom/index.ts
@@ -1 +1,2 @@
 export * from './translateCustomFont';
+export * from './translateFontVariantId';
diff --git a/plugin-src/translators/text/custom/translateCustomFont.ts b/plugin-src/translators/text/custom/translateCustomFont.ts
index eda5915b..28ea95b3 100644
--- a/plugin-src/translators/text/custom/translateCustomFont.ts
+++ b/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)
   };
 };
diff --git a/plugin-src/translators/text/custom/translateFontVariantId.ts b/plugin-src/translators/text/custom/translateFontVariantId.ts
new file mode 100644
index 00000000..e41099e8
--- /dev/null
+++ b/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()}`;
+};
diff --git a/plugin-src/translators/text/translateFontId.ts b/plugin-src/translators/text/translateFontId.ts
index 6eeda679..97aaf17d 100644
--- a/plugin-src/translators/text/translateFontId.ts
+++ b/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)
   );
 };