Appearance
CustomFontFamily
Interface defining custom font family configuration for the Stripo Email Editor Extensions SDK.
typescript
interface CustomFontFamily
Description
The CustomFontFamily
interface specifies the structure for adding custom fonts to the Stripo Email Editor. It allows extensions to register brand-specific or custom fonts that become available throughout the editor, including in font selection dropdowns and for use in email templates.
Import
typescript
import { CustomFontFamily } from '@stripoinc/ui-editor-extensions';
Properties
name
Display name of the font family shown in the editor's font selector.
typescript
name: string
Type
string
Usage Notes
- This is the human-readable name displayed to users
- Should be descriptive and recognizable
- Appears in all font family selection dropdowns
- Can include spaces and special characters
Example
typescript
{
name: 'Proxima Nova'
}
fontFamily
CSS font-family declaration used in the document's HTML/CSS.
typescript
fontFamily: string
Type
string
Usage Notes
- Must be a valid CSS font-family value
- Can include fallback fonts
- This value is directly inserted into CSS rules
- Should follow standard CSS font-family syntax
Example
typescript
{
fontFamily: '"Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif'
}
url
URL pointing to the font file or CSS file containing @font-face declarations.
typescript
url: string
Type
string
Usage Notes
- Can be an absolute URL to external font services
- Can be a relative URL to self-hosted fonts
- Typically points to a CSS file with @font-face rules
- The CSS is automatically loaded when the font is registered
- Supports Google Fonts, Adobe Fonts, or custom font hosting
Example
typescript
{
url: 'https://fonts.googleapis.com/css2?family=Proxima+Nova:wght@400;700'
}