Step by Step guide to finding Font Ids in Penpot
Start by importing all the custom fonts detected in your Figma file into Penpot. You can learn how to do this by following the detailed instructions provided here.
Once your fonts are imported, create a new project in Penpot. In this new project, add text elements using the fonts you've just imported to ensure they are active and available for use.
Navigate to a space outside the design canvas in Penpot, and use the right-click (or Ctrl + click for Mac users) to open the context menu. From the menu, select “Inspect” to open the developer tools panel.
In the developer tools panel, ensure you are on the "Elements" tab. Use the search function (Ctrl + F on Windows/Linux, Cmd + F on Mac) to look up a specific font name that you've imported. This will highlight the HTML elements where this font is applied.
Once you find the font name within the code, look for a font ID nearby, typically formatted as part of a class or an ID attribute following the prefix “custom-”. Be sure to copy only the unique identifier that follows this prefix.
Switch back to your Figma file, where the Penpot Exporter plug-in is activated. Paste the copied font ID into the appropriate field within the plug-in interface, matching it with the corresponding font.
For each font you have uploaded to Penpot, repeat steps 3 through 6. This ensures that all your custom fonts are correctly identified in the Penpot Exporter plug-in.
With all font IDs correctly linked, you can now export your design file from Figma using the Penpot Exporter plug-in, and your design will maintain its intended typography in Penpot.
Enjoy your beautifully designed project in Penpot, now seamlessly integrated with all your custom fonts! 🥳