Shipcode provides a centralized way to manage fonts for your projects, ensuring consistent typography across all your web and app experiences. This section outlines how to upload, manage, and apply custom fonts.
Supported Font Formats
Shipcode projects are published to both web and app environments. To ensure your fonts work across all platforms, Shipcode supports two primary file formats:
- TrueType Font (.ttf): This is the most universally supported format across web and app platforms.
- OpenType Font (.otf): This format is also widely supported and is preferred for advanced typographic features.
Note that other formats like.svg fonts or .woff and .woff2 are not recommended as they may not work across all platforms.
Managing Project Fonts
All font management is handled in Project Settings.
You can access this area from the main editor by clicking your avatar in the top right corner and selecting Project Settings. From there, navigate to the Fonts tab.
- Uploading Fonts: Click the Upload fonts button to add new font files to your project. You can select a single file or multiple files at once. Once uploaded, the fonts will be available for use in all layouts within that project.
- Default System Font: Every project includes a default System font. This font acts as a universal fallback, ensuring text can be rendered on any device or browser, even if a custom font fails to load.
Applying Fonts to Components
To apply an uploaded font to a text component:
- Select a Text component on the canvas.
- In the Appearance Panel (the right-hand sidebar), locate the Typography section.
- The Font family dropdown will list all the fonts you have uploaded. Select your desired font family.
- The Font style dropdown will then display the available weights and styles (e.g., Regular, Medium, Italic) based on the specific font files you uploaded. Select the style you wish to apply.
💡💡💡 Tip 💡💡💡
You can also access the Manage fonts link directly from the font family dropdown in the Appearance Panel, which will take you to the Project Settings.