• Products
  • Resources
  • Blog
  • Contact

How to Use Custom Fonts on Element Pack Pro

  • BdThemes
  • How to Use Custom Fonts on Element Pack Pro

Table Of Contents

How to Use Custom Fonts on Element Pack Pro

This documentation provides comprehensive insights into using the Custom Fonts developed by Element Pack Pro.

🧩 Custom Fonts Feature

The Custom Fonts feature — a powerful tool that allows you to upload and use your own typography to maintain your brand identity. With this feature, you can apply unique fonts across your Elementor designs, giving your website a professional and personalised look that stands out.

✨ Key Benefits

🔹 Effortless Font Upload – Upload and use your own fonts seamlessly without any coding.
🔹 Brand Consistency – Maintain your unique brand identity with custom typography.
🔹 Multiple Format Support – Compatible with all popular font formats (.woff, .ttf, .otf, .svg, .eot).
🔹 Global Application – Instantly apply custom fonts across any Elementor widget or section.
🔹 Professional Appearance – Enhance your website’s uniqueness and give it a polished, professional look.

Add Custom Font

Go to WP Dashboard > Element Pack Pro

custom fonts
  1. Now navigate to the ” Custom Fonts ” tab on the Element Pack Pro dashboard tab. It will open the custom fonts page.
  2. Find the ” Add New Font ” button on the top Left corner and click on the button.

Set Font Name & Upload

Set name and upload - BdThemes
  1. Set a name for your custom font. Example: Element Pack Pro Custom Fonts
  2. Font Weight: Set the weight of the font. Example: 400 – Normal
  3. Font Style: Choose the style for the font. Example: Normal
  4. Upload Fonts Support.
  • WOFF2 ( Recommended ): Best format for modern browsers with superior compression.
  • WOFF: Widely supported format ensuring compatibility across most browsers.
  • TTF: Standard TrueType font format for desktop and web usage.
  • OTF: OpenType font format offering advanced typography features.
  • EOT ( IE Support): Embedded OpenType format, primarily for older versions of Internet Explorer.
  • SVG ( Legacy ): Legacy format for older iOS devices and browsers.
Upload fonts 1 - BdThemes
  1. Upload: Click the Upload button to open the WordPress Media Library and select your desired font file.
Upload fonts 2 - BdThemes
  1. Choose the desired font you want to work with from the uploaded list to apply it across your Elementor widgets or sections.
  2. Click on the “Use This File” button to confirm your selection and assign the chosen font file for use on your website.
Upload fonts 3 - BdThemes
  1. Once the font file is selected, it will appear in the list. A “Remove” button will also appear next to it — click this button if you wish to delete or replace the uploaded font file.
Published - BdThemes
  1. After uploading the font, click the “Publish” button to save and apply the custom font to your website.
Published 2 - BdThemes
  1. Once the font is successfully published, a success message will appear confirming that your custom font has been uploaded and saved.

Check uploaded Fonts

Font Preview - BdThemes
  1. Click on the “Custom Fonts” tab to open the Custom Fonts section. All uploaded fonts will be displayed in a table format.
  2. Preview: View a live preview of the font.
  3. Variation: Shows how many variations are available for the font.

Where to find the Fonts

Add any Text Widget ( Advanced Heading Widget )

Heading Widget added - BdThemes
  1. Click on the “+” icon to open the widget panel.
  2. Search for the widget named “Advanced Heading”, and it will appear in the results.
  3. Select the widget, then drag.
  4. Drop it onto the editor page.

Choose the Typography

Typography - BdThemes
  1. Navigate to the Style section and locate Typography. Click on it to open the typography settings for editing.
Typography 2 - BdThemes
  1. On the font list, the custom fonts appear under the “Element Pack Font” headline.
  2. The uploaded fonts are displayed in the right section, showing their name as well, e.g., Element Pack Custom Fonts.
Typography 3 - BdThemes
  1. After selecting the custom font, it will appear under the Font Family option
  2. The selected font will be applied and displayed on the title.
Typography 4 - BdThemes
  1. Select the desired font variation and configure the following settings:
  • Size: Set the font size.
  • Weight: Choose the font weight (e.g., 400 – Normal, 700 – Bold).
  • Transform: Apply text transformations (e.g., Uppercase, Lowercase, Capitalize).
  • Style: Set the font style (e.g., Normal, Italic, Oblique).
  • Decoration: Apply text decoration (e.g., None, Underline, Overline, Line-through).

Video Assistant

Video Tutorial Coming Soon!
We appreciate your support.

Take advantage of fine-tuned plugins

Get Customizable Elementor Widgets to Power Up Your Website

Take advantage of fine-tuned plugins to speed up web projects without sacrificing quality. We offer a 14-days money-back guarantee.

Call or WhatsApp for assistance:+880 1700 55 95 95

Our supported payment system and security badge