Latest

Custom Fonts and Layer Management

Add custom fonts from providers like Google Fonts to display templates, and enjoy improved layer management with drag-and-drop reordering.

Overview

This release introduces custom font support in display templates and improved layer management with drag-and-drop reordering in the Display Template Editor.

New Features

Custom Font Support in Display Templates

Display template editors can now add custom fonts from providers like Google Fonts directly within the template editor. Instead of being limited to built-in fonts, users can paste a CSS import snippet from any trusted font provider, and the application will automatically extract and make the font available for use in templates.

How to Access:

  1. Navigate to Project Setup > Display templates
  2. Select or create a display template
  3. Click Edit layout to open the Layout Editor
  4. Select any text-based layer (Text or Countdown)
  5. In the right sidebar under Typography, click the + icon next to the Font dropdown

How to Use It:

  1. Visit Google Fonts and select a font
  2. Copy the @import statement (e.g., @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');)
  3. In the template editor, click the + icon next to the Font dropdown
  4. Paste your CSS import snippet and click Parse Font
  5. Click Add Font to add it to your template
  6. The font appears in the dropdown and is automatically selected

Removing a Font:

  1. Open the Font dropdown in the Typography section
  2. Hover over any custom font to reveal the delete icon
  3. Click the delete icon to remove the font

Key Capabilities:

  • Multiple Providers: Support for Google Fonts, Adobe Fonts (Typekit), Fonts.com, Typography.com, and Font Awesome
  • Automatic Detection: Font name automatically extracted from CSS imports
  • Real-time Preview: See font changes instantly in the editor before saving
  • Multiple Fonts: Add multiple custom fonts per template
  • Interactive Updates: Layer updates without page refresh

Layer Sorting and Drag-and-Drop

The Display Template Editor now features improved layer management with intuitive drag-and-drop reordering and corrected layer sorting. Layers are displayed in visual top-to-bottom order that matches their appearance on the canvas.

How to Access: The layer panel is located on the left side of the Display Template Editor when editing any template layout.

How to Use It:

  1. Click and hold on any layer in the layers panel
  2. Drag the layer up or down to its new position
  3. A blue border indicator shows where the layer will be placed
  4. Release the mouse button to drop the layer in the new position
  5. The layer order updates immediately on both the list and the canvas

Key Capabilities:

  • Visual Drag-and-Drop: Real-time feedback during layer reordering
  • Corrected Sort Order: Layer list matches visual stacking (topmost layers at top of list)
  • Context Menu Alternative: Right-click any layer and use Move up/down options

Breaking Changes

None. All new features are opt-in and do not affect existing functionality.