Elementor makes typography straightforward for standard font choices, but custom brand fonts require a bit more setup. There are three methods depending on where your fonts come from: Google Fonts (simplest), uploading custom font files (for purchased or brand fonts), and Adobe Fonts/Typekit (for Creative Cloud subscribers).
Method 1: Google Fonts (Built-In)
Elementor includes access to the full Google Fonts library with no setup required. Click any text widget, go to the Style tab, and click the Font Family field. Start typing a font name – Elementor searches the Google Fonts library in real time. Select the font and it loads automatically. No API keys, no plugin configuration needed.
For consistent typography across your site, set your global fonts in Elementor -> Site Settings -> Typography. Set Primary Font (for headings) and Secondary Font (for body text) here. Every widget that uses the global font setting automatically uses these choices.
Need help with your WordPress site? Describe your project and get a free estimate.
Method 2: Custom Font Upload (Brand or Purchased Fonts)
For fonts that are not in Google Fonts – brand fonts provided by a designer, purchased fonts from a type foundry, or system fonts you want to embed – use Elementor Pro’s Custom Fonts feature.
Go to Elementor -> Custom Fonts -> Add New. Enter the font family name (this becomes how you select it in Elementor). Upload the font files. You need the font in at least WOFF2 format for modern browsers. If you only have an OTF or TTF file, convert it to WOFF2 using a free online tool like Font Squirrel’s Webfont Generator or Transfonter before uploading.
Upload each weight variation separately – regular (400), bold (700), and any other weights you use. For each weight, specify the Font Weight value to match. After saving, the custom font appears in Elementor’s font selector alongside Google Fonts.
Method 3: Adobe Fonts (Typekit)
If you have an Adobe Creative Cloud subscription, Adobe Fonts (formerly Typekit) gives access to a premium font library. To use Adobe Fonts in Elementor:
- Go to fonts.adobe.com and create a Web Project with the fonts you want
- Copy the embed code Adobe provides (a CSS @import or a script tag)
- Go to Elementor -> Custom Fonts -> Add New
- Alternatively, paste the Adobe Fonts embed code in your theme’s header or in a plugin like Header Footer Code Manager
- In your CSS, reference the Adobe font family name in your Elementor typography settings by typing it manually in the font field
Performance Considerations
Each additional font family adds an HTTP request and download time. Google Fonts are cached across sites (most visitors already have them cached). Custom uploaded fonts are served from your server. Adobe Fonts are served from Adobe’s CDN. For performance, limit your site to two font families maximum – one for headings, one for body text. Each additional font family and weight adds approximately 20-80KB to your page load.
If you use Google Fonts, enable local hosting for GDPR compliance and performance: OMGF (Optimize My Google Fonts) downloads Google Fonts to your server and serves them locally, eliminating the external Google request.