help center

Search
Close this search box.
On this page

Add custom static fonts

Last Update: October 8, 2024

If you need more than the over 800 Google fonts that come with Elementor, you can add custom fonts to your website. 

Note
You can also variable fonts in Elementor. For details about adding variable fonts, see Use variable fonts.

Add custom fonts

Adding custom fonts to your website is done through the WordPress dashboard.

Tip
You must first copy or download the font files to your PC.

To add custom fonts

  1. Go to WP Admin.
    image 1 Add custom static fonts 1
  2. Navigate to Elementor>Custom Fonts.
    image 2 Add custom static fonts 3
  3. Click Add New.
    image 3 Add custom static fonts 5
  4. Name your font.
    image 4 Add custom static fonts 7
  5. Click Add Static Font.
    5 choose the font family Add custom static fonts 9
  6. Choose the font type you want to install. See below the font types supported by Elementor. In this example, we’ll use a ttf file. 
    image 5 Add custom static fonts 11
  7. Click Upload.
    image 6 Add custom static fonts 13
  8. Click the Upload files tab.
    image 7 Add custom static fonts 15
  9. Click Select files.
  10. Navigate to your font files and add to your Media Library.
    image 8 Add custom static fonts 17
  11. Click Select file
    image 9 Add custom static fonts 19
  12. Click Add Static Font.
    image 10 Add custom static fonts 21
  13. Use the dropdown menus to select a Weight and or Style for the font.
    Note
    You must add every font weight class and type you want to use as a separate file. For instance, if you want to use myfont as a regular font with a weight of 400 and as a regular font with a weight of 900 and as an italicized font, you will have to add them separately.

    image 11 Add custom static fonts 23
  14. (Optional) If you want to add another version of the font with a different Weight and/or Style, click Add Static Font.
  15. Repeat until you’ve added all the fonts you need.
    image 12 Add custom static fonts 25 
  16. Click Publish.

Use your custom fonts

After installing custom fonts, you can use them in the Elementor Editor.

To use custom fonts:

  1. Go to the Style tab of an element that contains text.
    image 13 Add custom static fonts 27
  2. Click the pencil icon by Typography. For details about changing typography, see Typography.
    image 14 Add custom static fonts 29
  3. In the text box, enter the name of your custom font.
  4. Select that font.
  5. (Optional) If you added more than one weight/style of the font, use the menu to select one of them. 

Your custom font will appear in the element.  

Note
Uploaded fonts are stored in the wp-content/uploads/ folder on your server.

Font types supported by Elementor:

  • The Web Open Font Format (WOFF) – WOFF is the most recommended format to use, since it is supported by all modern browsers
  • The Web Open Font Format (WOFF 2.0) – TrueType/OpenType font that provides better compression than WOFF 1.0
  • TrueType Fonts (TTF) – This font was developed in the late 1980s, by Apple and Microsoft
  • SVG Fonts/Shapes – SVG fonts allow SVG to be used as glyphs when displaying text. Make sure to use this format to support old versions of iPhone
  • Embedded OpenType Fonts (EOT) – This font file works on IE, but not on other browsers. Make sure to use this format to support earlier versions of IE
Note
Different browsers support different font types so it’s important to test your site on a variety of browsers types.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article

Platinum popup banner