Fonts Plugin
  • Introduction
  • Installation
  • Developers
  • Optimization
    • Optimization Panel
    • Font Loading
  • Basic Settings
    • Base Typography
    • Headings Typography
    • Buttons and Inputs Typography
  • Advanced Settings
    • Branding
    • Navigation
    • Content
    • Sidebar
    • Footer
    • Load Fonts Only
    • Custom Elements
  • Classic Editor
    • Getting Started
  • Gutenberg
    • Getting Started
    • Transformations
  • Custom Font Uploads
    • Custom Font Uploads
  • Debugging
    • Reset All Fonts
    • Force Styles Setting
    • CSS Font Display
    • Clear Fonts Cache
  • Integrations
    • Adobe Fonts
    • Beaver Builder
    • Elementor
    • WPBakery
    • Divi Builder
  • Translations
    • Contributing
  • Fonts Plugin Pro License Key
  • Fonts Plugin Pro Files
  • Updating Fonts Plugin Pro
  • Manual Update
  • Support Access
Powered by GitBook
On this page
  • Custom/Uploaded Fonts
  • Abobe Fonts (Typekit) Fonts
  • Google Fonts

Was this helpful?

  1. Integrations

Elementor

How to use your chosen fonts in the Elementor WordPress plugin.

PreviousBeaver BuilderNextWPBakery

Last updated 3 months ago

Was this helpful?

In this guide we will refer to Elementor's global settings. To access those, edit a page, then click the 'Site Settings' icon.

Next, click the 'Typography' section under 'Theme Style'.

It's also possible to set fonts for individual text blocks, which we will also cover below.

Custom/Uploaded Fonts

Global Fonts in Elementor

When using the 'Typography' settings within Elementor you will now have access to the fonts you uploaded.

Text Editor Fonts in Elementor

When using the 'Text Editor' block within Elementor you will now have access to the fonts you uploaded.

Abobe Fonts (Typekit) Fonts

Global Fonts in Elementor

When using the 'Text Editor' block within Elementor you will now have access to your Adobe Fonts.

Text Editor Fonts in Elementor

When using the 'Text Editor' block within Elementor you will now have access to your Adobe Fonts.

Google Fonts

To use Google Fonts in the 'Elementor' plugin, you must first tell the plugin which fonts you want to use.

  • In wp-admin, navigate to Appearance → Customize

  • Click Google Fonts → Advanced Settings → Load Fonts Only

  • Add the fonts you want to use

  • Click Publish

Text Editor Fonts in Elementor

Now when using the 'Text Editor' block within Elementor you will have access to the fonts you have chosen (as well as some system fonts):

First, follow the guide on uploading your custom fonts .

First, follow the guide on integrating Adobe Fonts with Fonts Plugin .

here
here