Editor Settings - Typography and +Add New Font

The Typography section allows you to adjust and style the text elements in your popup. It gives you control over how your text looks, ensuring your message is clear, readable, and visually aligned with your brand.

Edit Hover Style

This setting allows you to customize how your text behaves when a user hovers over it. You can adjust properties such as color, decoration, and other visual effects that appear on hover.

Use this to create interactive text elements that grab attention, improve readability, or guide users to important actions like clickable links or buttons.

Available Settings

• Font Family

  Choose the typeface for your text. You can select from installed fonts or add new ones in the Fonts section.

• Font Size

  Adjust the overall size of your text. Options range from small to extra-large, or you can define a custom size.

Adjust the size of your text using different measurement units:

• px (pixels): Fixed size, best for precise control.
• % (percent): Relative to the parent element’s size.
• em: Relative to the current element’s font size.
• rem: Relative to the root (default) font size of the document.
• vh: Relative to the viewport height.
• vw: Relative to the viewport width.

• Font Weight

  Change the thickness of the text (e.g., Normal, Bold). Useful for highlighting or emphasizing content.

• Font Style

  Choose between normal or italic text styles to modify text appearance.

Adjust the spacing using different measurement units:

• px (pixels): Fixed size, best for precise control.
• % (percent): Relative to the parent element’s size.
• em: Relative to the current element’s font size.
• rem: Relative to the root (default) font size of the document.
• vh: Relative to the viewport height.
• vw: Relative to the viewport width.

• Letter Spacing

  Adjust the space between letters. Increasing spacing improves readability, while tighter spacing saves layout space.

• Color

  Select the color of your text using the color picker or by entering a specific color code.

• Line Height

  Set the vertical spacing between lines of text for better readability and layout balance.

Adjust the line height using different measurement units:

• px (pixels): Fixed size, best for precise control.
• % (percent): Relative to the parent element’s size.
• em: Relative to the current element’s font size.
• rem: Relative to the root (default) font size of the document.
• vh: Relative to the viewport height.
• vw: Relative to the viewport width.

• Text Align

  Align your text to the left, center, right, or justify according to your design preference.

• Text Shadow

  Add a shadow effect to your text for visual depth or contrast. You can define the shadow’s color, offset, and blur.

How To Add New Font

The Fonts window allows you to add, customize, and manage the typography used in your popup designs. You can choose from existing fonts, install new ones, or create your own to match your brand’s style.

How It Works

1. Search or Select a Font
   • Use the search bar to enter a font name or browse through the dropdown list.

• Select from the available fonts (e.g., ABeeZee).

2. Install Font

• Click Install font to add a new font from available sources or your local library.
• Once installed, the new font will appear in the dropdown list.
2. Create Custom Font

• Click Create custom font to upload or configure a unique font style.
• Ideal for brands with specific typography requirements.
2. Installed Fonts Section

• Displays all fonts currently available in your workspace.
• You can view and manage previously added fonts here.

Actions

• Save: Confirms and applies the selected font to your popup.
• Cancel: Closes the Fonts window without saving any changes.

The Typography section lets you style and control how your text appears in the popup. You can adjust font family, size, weight, style, color, and alignment to match your design. It also supports different font size units (px, %, em, rem, vh, vw) for better flexibility and responsiveness. This section helps ensure your popup text is clear, readable, and consistent with your brand.

Learn how to control the overall dimensions and proportions of your popup elements in the next section — Block Size Settings: Editor Settings - Block Size