Font configuration

Due to differences in how Adobe Illustrator handles fonts versus how CSS expects them, ai2svelte includes a font configuration system to ensure proper font rendering in your exported Svelte components. You’ll need to map Adobe typeface names to CSS font stacks for any custom fonts used in your designs.

Getting Started

When you first run ai2svelte on a document with custom fonts, the extension will:

• Notify you about any missing font mappings
• Display a list of all fonts detected in your document
• Prompt you to configure the necessary mappings

Adding Font Mappings

To configure your fonts:

1. Navigate to the Settings tab in the ai2svelte panel. 2. Locate the Font Configuration section. 3. Add your custom font mappings using the format shown below:

Knowledge2017: 'Knowledge', Arial, sans-serif
AdobeFontName: 'CSS Font Name', fallback1, fallback2

Key Features

• Persistent Configuration: Font mappings are saved and automatically applied to future sessions
• Flexible Fallbacks: Define multiple fallback fonts for better cross-platform compatibility
• Easy Updates: Modify font configurations at any time as your design requirements change

Best Practices

• Always include web-safe fallback fonts (Arial, Helvetica, sans-serif, etc.)
• Use quotes around font names that contain spaces
• Test your font stacks across different browsers and operating systems