Setup Font Preview

Once WooCommerce and RTM Font Showcase have been successfully installed and activated, you can proceed to set up your font preview from the Products page.

1. Add a Font Product

• Go to Products → Add New Product from your WordPress Dashboard.
• Enter the required product information, such as the Product Name, Description, and other details. Once you have finished adding the product information, you can proceed to configure the font preview.

2. Enable Font Showcase

• Turn this on to display this product as an interactive font showcase.
• Complete the product information according to your needs, such as the Product Name, Description, Product Image, Price, and other relevant details.
• Make sure all required product information has been filled in before proceeding to the next step.

3. Set Up Font Showcase

• From the Product page, click RTM Font Showcase Settings.

• or navigate directly to the RTM Font Showcase menu.

• Then, click Setting
• You will then be redirected to the Font Showcase Settings page, as shown in the image below.

• Once you access the RTM Font Showcase Settings page, you can customize the appearance and default typography of your font preview. These settings are applied globally to the font showcase and allow you to control its colors, spacing, sizing, and preview text.
• Global Settings : The Global Settings section allows you to customize the overall appearance of the font preview stage.
• Stage Background : Set the background color of the font preview area. Choose a color that provides enough contrast with the font displayed.
• Stage Text Color : Choose the default text color used for the font preview.
• Stage Border Color :Customize the color of the border surrounding the font preview stage.
• Weight Label Color : Set the color of the font weight labels displayed in the font showcase.
• Stage Border Radius : Adjust the roundness of the corners of the font preview stage. A higher value creates more rounded corners.
• Stage Padding : Control the spacing between the content and the edges of the font preview stage. Increase the value to give the preview more breathing room.
• Stage Border Width : Set the thickness of the border around the font preview stage.
• Default Font Size : Define the default font size used when displaying the font preview.
• Default Line Height : Adjust the vertical spacing between lines of text in the font preview. This is useful when your sample text contains multiple lines.
• Default Sample Text : Add the default text that will be displayed in the font preview. You can leave this field empty if you want each font preview to use the font name as its sample text instead.

4. Preview Font Showcase

• Once you have finished configuring the Font Showcase Settings, you can preview how your font showcase will appear on your website.

• In the Preview section, you can also change the text and font size to see how the font looks in real time before using it. This allows you to make sure the font style and size match your design needs.