Configuring Font Settings for Text

The Font popup lets you change the font family of a text element and configure the settings that affect its appearance. Watch the video below for an overview of how to change your website fonts using the Font popup, and read below for more detailed instructions.

To configure a text element's font settings:

1. Click on the font name at the right of a text element.
   

   The Font Settings popup will be displayed

   
2. Select the font family from the dropdown list.
3. Configure the settings for the selected font.
   • Size: sets the size of the font in pixels. Use the slider or specify a value between 6 and 120.
   • Line Height: sets the height of the line of the text element by adding space above the text. The height is specified as a factor of the current font size. Use the slider or specify a value between 0.6 and 6.
   • Min. Height (only available for header text, such as the product name): sets the minimum height of the line of text. The height is specified in pixels. Use the slider or specify a value between 0 and 300.
   • Weight: sets how thin or thick the characters of the text should be.
   • Italics: displays the font in italics if the checkbox is ticked.
   • Small Caps: if this checkbox is ticked, all letters entered as lowercase will be set to uppercase, but will maintain the original height of the lowercase letters.
   • Spacing: sets the letter spacing of the font as a factor of the current font size. Use the slider or specify a value between -0.1 and 0.4.
   • Wrap when Multiple Lines (only available for header text, such as the product name): allows you to specify that a line of text can break into multiple lines. This helps to avoid an unusually long string of text causing layout problems.
   • Letter Spacing: sets the letter spacing of the font as a factor of the current font size. Use the slider or specify a value between -0.1 and 0.4.
   • Word Spacing: sets the word spacing of the font as a factor of the current font size. Use the slider or specify a value between -0.1 and 1.
   • Decoration: sets the appearance of the decorative line, if any, added to the text.
     • None: no line is added.
     • Underline: adds a 1-pixel line across the baseline of the text.
     • Overline: adds a 1-pixel line across the top of the text.
     • Line-Through: adds a 1-pixel line across the middle of the text.
   • Transform: sets the capitalization style of the text.
     • None: leaves the text exactly as it was entered.
     • Capitalize: capitalizes the first letter of each word.
     • Uppercase: makes all letters uppercase.
     • Lowercase: makes all letters lowercase.

   For the Size, Line Height, and Spacing properties, you can use the slider to configure the setting.

   

   The slider will appear when you hover your mouse anywhere along the line between the label and the input field of the property.

4. Close the font dialog box.