import { Banner, IconInfo32, Link } from '@create-figma-plugin/ui'; import { useFigmaContext } from '@ui/context'; import { Stack } from './Stack'; export const MissingFontsSection = () => { const { missingFonts } = useFigmaContext(); if (!missingFonts || !missingFonts.length) return null; return ( }> {missingFonts.length} custom font{missingFonts.length > 1 ? 's' : ''} detected:
    {missingFonts.map(font => (
  • {font}
  • ))}
To export your file with custom fonts, first upload them in Penpot.{' '} Learn how to upload fonts.
); };