While Google Fonts offers a vast selection, sometimes you need a specific font that’s not available there, or you have a custom-designed font for your brand. Elementor Pro provides a straightforward way to upload and use these custom fonts, giving you complete control over your website’s typography. This guide shows you both methods.
The Tools
- WordPress (self-hosted): The foundation (wordpress.org).
- Page Builder Framework (Optional): A lightweight theme that works well with Elementor.
- Elementor Pro: The premium version of Elementor is *required* for the custom fonts feature.
- Fontspring (Optional): A source for purchasing and downloading web fonts (recommended for licensing and ease of use).
- Transfonter (Optional): An online tool for converting desktop fonts to web-ready formats.
Font Requirements
For optimal browser compatibility, you should ideally have your custom font in the following formats:
- WOFF (Web Open Font Format): A modern, compressed format supported by most browsers.
- WOFF2 (Web Open Font Format 2): An even more compressed version of WOFF, offering better performance.
- TTF (TrueType Font): A widely supported format, often used for fallback.
- SVG (Scalable Vector Graphics): Used primarily for older iOS devices (less common now).
- EOT (Embedded OpenType): Used for older versions of Internet Explorer (less common now).
If you purchase a web font from a reputable source like Fontspring, it will usually come with all these formats. If you have a desktop font (typically TTF or OTF), you’ll need to convert it using a tool like Transfonter.
Method 1: Using Web Fonts (Recommended)
This is the easiest and most reliable method, as it uses fonts specifically designed for web use.
Find a Font (Example: Fontspring)
Go to a font provider like Fontspring (Fontspring). Search for your desired font. This example uses “Amerta Misty,” a free script font, but the process is the same for any font.
Make sure to review the licensing terms carefully. Some free fonts may have restrictions on commercial use.
Purchase/Download the Web Font Files
On Fontspring (or your chosen provider), select the “Web Font” option (if applicable) and add the font to your cart. Even for free fonts, you may need to go through a checkout process.
After purchasing/checking out, download the font files. You should receive a .zip file containing the various web font formats (WOFF, WOFF2, TTF, SVG, EOT).
Extract the Font Files
Extract the contents of the .zip file to a folder on your computer. You should now have individual files for each font format.
Add to Elementor
In your WordPress dashboard, go to “Elementor” > “Custom Fonts.” Click “Add New.”
Give your font a name (e.g., “Amerta Misty”). It’s best to use the actual font name for clarity.
Click “Add Font Variations.” For each font format (WOFF, WOFF2, TTF, SVG, EOT), click the “Upload” button, select the corresponding file from your computer, and click “Open” then “Select”.
- Repeat this process for *each* of the font formats (WOFF, WOFF2, etc.).
- You should see each format listed under “Font Variations.”
Once you’ve uploaded all the variations, click “Publish” (or “Update” if you’re editing an existing font).
Method 2: Using a Desktop Font
If you have a desktop font (usually a .ttf or .otf file) that you want to use, you’ll need to convert it to web-friendly formats.
Find and Download a Desktop Font (Example: 1001fonts)
Many websites offer free desktop fonts, such as 1001fonts.com. This example uses “Homoarakhn” from 1001fonts, but the process is similar for other fonts. *Always check the licensing terms before using any font.*
Download the font file (usually a .zip file). Extract the contents. You’ll typically find a .ttf or .otf file.
Convert with Transfonter
Go to Transfonter. Click the “Add fonts” button.
Select the .ttf or .otf file you extracted from the downloaded font. Ensure that all the desired formats (WOFF, WOFF2, TTF, SVG, EOT) are checked. For best results, also check these options under “Settings”:
- “Fix Vertical Metrics”
- “Add Local Rule”
- “Base64 Encode”
Click “Convert.” Once the conversion is complete, click “Download.” You’ll receive a .zip file containing the converted web font formats and a stylesheet.css file (which you don’t need for this method).
Extract this new zip file.
Add to Elementor
Follow the same steps as in Method 1 (“Add to Elementor”) to upload the converted font files (WOFF, WOFF2, TTF, SVG, EOT) to Elementor’s Custom Fonts section.
Using Your Custom Font
Now that you’ve uploaded your custom font, you can apply it to your Elementor website.
For a Single Element
Edit the page or post where you want to use the font with Elementor. Add or select a text-based widget (e.g., Heading, Text Editor, Button).
Go to the “Style” tab of the widget settings. Click the pencil icon next to “Typography.”
In the “Family” dropdown, start typing the name of your custom font (e.g., “Amerta Misty” or “Homoarakhn”). It should appear in the list. Select it.
Adjust the font size, weight, and other typography settings as needed. Click “Update” to save your changes.
Globally (Site Settings)
To apply your custom font to all instances of a specific element (e.g., all H3 headings), use Elementor’s Site Settings.
From within the Elementor editor, click the hamburger menu (three horizontal lines) in the top-left corner. Select “Site Settings.”
Go to “Global Fonts” or “Typography” (the exact name may vary depending on your Elementor version). Find the element you want to customize (e.g., “H3”).
Click the pencil icon next to the element. In the “Family” dropdown, select your custom font. Click “Update” to save your changes.
If your font doesn’t appear right away globally, try the following. Go to Elementor > Settings. On the General tab, tick the ‘Disable Default Colors’ and ‘Disable Default Fonts’ check boxes. Click Save Changes.
Conclusion
Elementor Pro makes adding custom fonts to your WordPress website a relatively simple process. Whether you’re using pre-made web fonts or converting desktop fonts, you can achieve a unique and professional look that aligns with your brand. Remember to always respect font licensing terms and choose fonts that are both visually appealing and readable.