For web designers.calligraphic styleStyle and layout are critical. The right fonts make the page clearer, easier to read and more attractive. Depending on the Elementor The claim that 90% of web design comes from fonts.

exist WordPress More than 800 fonts can be used by default on a website. However, if you want to give your website a brand personality, you need to add custom fonts, and Elementor provides the functionality to upload and use custom fonts.

This article describes how to use Elementor withElementor proA complete method for adding custom fonts to Elementor. Before getting into the details, it is important to understand Elementor's font capabilities and where fonts come from.

Introduction to Elementor Custom Fonts

Customization means a solution built for individual needs, and Elementor supports uploading the following five font formats:

• WOFF (Web Open Font Format): well supported by modern browsers
• WOFF 2.0: Supports TrueType or OpenType for higher compression rates.
• TTF (TrueType Fonts): Developed by Apple and Microsoft
• SVG Fonts: Adapts to older iPhones
• EOT (Embedded OpenType Fonts): Compatible with older versions of Internet Explorer

Note: The new EU GDPR regulation clearly states that loading fonts directly from Google may constitute a violation and may result in a fine. It is recommended to host Google Fonts locally or use custom fonts.

It is recommended to use the Perfmatters plugin to manage fonts locally, which can be configured by referring to the relevant documentation.

Customized fonts acquisition channels

Designing your own fonts requires a variety of skills such as typography, font encoding, format conversion, licensing, and so on. If you do not have these skills, you can use free or paid fonts provided by professional designers.

The following are commonly used font download sites:

• Google Fonts
• Font Squirrel
• FontSpace
• DaFont
• Open Foundry

Take DaFont as an example to show the download steps as follows:

Step 1: Visit DaFont.com to download fonts

Go to the DaFont website and click the Download button next to your favorite font.

Step 2: Unzip the font file

Downloaded as a ZIP archive, please unzip it before use.

Elementor only supports certain font formats and cannot upload the zip file itself.

Step 3: Select available font formats

In the unzipped file, look for the inclusion of the .ttf or other Elementor Supported formats. Memorize this file, which will be used in subsequent tutorials.

Adding fonts to Elementor and Elementor pro

The process is different between the two versions; the Custom Fonts feature that comes with Elementor is only available in the Pro version, but can be implemented in the free version with the help of a plug-in.

Method 1: Add custom fonts in Elementor Free Edition

Plug-ins are recommended:Custom Fonts maybe Custom Typekit FontsThe following are examples of Custom Fonts. The following is an example of Custom Fonts:

Step 1: Install Custom Fonts Plugin

go into WordPress In the backend, click Plugins > Add New, search for "Custom Fonts", install and activate it.

Once enabled, Custom Fonts will appear in the Appearance menu, click on it, and then click "Add New Font".

Step 2: Upload and name the fonts

In the Local Fonts tab, click "Choose File" to upload the file. .ttf Font File. Enter the name of the font, e.g. "Sunday Grapes".

You can add multiple font variants and preview the effect. Click "Save Font" to save the settings.

Step 3: Test the fonts in Elementor to see if they take effect

Open any page or article and go to the Elementor editor. Drag in the Heading or Text Editor component.

Search for the font you just added in Style > Typography > Family. If "Sunday Grapes" appears, the addition was successful.

The same applies to the Custom Typekit Fonts plugin.

Method 2: Adding fonts in Elementor Pro using built-in functions

Prerequisites: Activated Elementor proThe

Step 1: Go to the Font Management page

Go to Elementor > Custom Fonts and click "Add New" to add a new font.

Enter the name of the font, e.g. "My Font", and click "Add Font Variation".

Step 2: Upload the font file and set the parameters

Select font style, weight, etc. and click the upload button to add the .ttf Documentation.

Repeat the operation to add multiple variants. For example, set the weight to 100 and then upload the corresponding file.

After the upload is complete, the upload from themedia librarySelect the font file in the

Step 3: Publishing Fonts

Once the configuration is complete, click "Publish" to publish the font.

Step 4: Using Fonts in Elementor Pages

Go to any page and drag in the Text or Heading component.

Select the font you uploaded (e.g. "My Font") in Style > Typography > Family.

You can continue to adjust the font size, style, thickness, decoration, etc. to create the visual effect you want.

Method 3: Use code to add fonts manually

Suitable for users with a code base:

1. exist wp-content/themes/your-themes/ newly built under fonts file (paper)
2. Upload font files to this directory
3. In the theme of style.css Add the following code to the

@font-face {
font-family: 'MyCustomFont'.
src: url("/fonts/MyCustomFont.woff2") format("woff2"),
url("/fonts/MyCustomFont.woff") format("woff"), url("/fonts/MyCustomFont.woff") format("woff").
font-weight: normal;
font-style: normal; }
}

4. exist CSS The font is called in, e.g:

h1, h2 {
font-family: 'MyCustomFont', sans-serif;
}

If you need to add italic or bold style, you need to add the corresponding rules respectively.

Summary of Frequently Asked Questions

Q: After adding fonts Elementor Unavailable in?

If the font is an exception in the Elementor component, it is recommended to set the font to Default and reselect the Typography option.

Q: How do I add fonts manually in WordPress?

1. Download the fonts and unzip them
2. upload wp-content/themes/your-themes/fonts
3. exist style.css Add a font rule and call

Q: Are OTF fonts available?

1. Install the Custom Fonts plug-in
2. Upload OTF files at Appearance > Custom Fonts
3. Supported formats include WOFF2, WOFF, TTF, EOT, OTF, SVG.

Q: What are the steps to add fonts without a plugin?

1. Get fonts from Google Fonts
2. Copy the embedded code
3. stick shore
4. Calling fonts in style files

concluding remarks

Custom fonts can add personality to a page design and play a huge role in brand expression. If the default fonts don't meet the visual requirements, using custom fonts is a great option. Hopefully, this tutorial has provided clear and complete ideas on how to do this and helped you through the font upload and application.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨詢：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off