How to Change Font Size, Color, Family & Style in Elementor Page Builder?

From time to time, our users ask us how to change the font size, color or family. Fonts appear in almost every widget we have, so this is a very basic feature worth explaining. Elementor is first and foremost a page builder, so its purpose is to give you total control to design all the fonts and content in your WordPress website, in a much easier and visual way than ever before.

We are going to go over every widget, but you should know that in Elementor all settings remain pretty much consistent throughout the widgets, so you can intuitively understand where, for example, font settings appear, ever for a widget you've never used before.
The basic position of the font settings is under the widget setting > Style, change 'Typography' to 'Custom', and start customizing fonts to your preferred setting.

Changing Font Color in Elementor Page Builder

Because fonts are so basic, we have placed them above all custom font settings in the style tab. You can choose any colors from the color picker, or enter the hex code of the color you want for the font. A best practice is to customize the color picker default colors in the main settings page, so they will be easily accessible for you when customizing font and other element colors.

Change Font Size 

The first setting is called 'Size' and features a draggable scale to increase or decrease the size of the font. 
The size exact number appears in the right field. If you delete the number from this field, the size of the font returns to the default setting of Elementor.
Above the scale appears a desktop icon. If you press this icon the font size control icons for mobile and tablet will open up. These icons let you set different font sizes for tablet and mobile views. This is very useful when you discover, for example, that the large heading you designed for desktop looks too big on mobile. Read more about our Mobile Editing feature in the  related documentation. When you set different font sizes for desktop, mobile, and tablet, switching between the icons will also switch between the different scales you set per device.
Above the size field, you will find 3 different size scales to choose from PX, EM, and REM. This is very useful if you need the font to stay consistent and proportional regardless of the screen or device the page is viewed on.

Change Font Family Within the Page Builder

Next, we are able to change the font family of the text element we are editing. I can type the font I am looking for, or browse and choose a font, using the scrolling drop-down menu. 

Once you choose a font, it will be displayed live on the editor, so you can play around and experiment what works best for your design. Fonts we love and recommend using are Roboto, Proxima, Poppins, Vida Loca, Raleway, Playfare, Lobster, Abril Fatface and Pacifico. Every Google font is already included in Elementor, so you can choose from the hundreds of different options.

Change Weight, Transform, Style, Line-Height & Letter Spacing

  • Weight: Define the weight of the font, and choose from a range of 100 to 900, bold or normal.
  • Transform: Easily switch the text to be uppercase, lowercase or capitalize.
  • Style: Choose either normal, italic or oblique style for the font.
  • Line Height: Give more breathing room between the lines of text, on a PX or EM scale. The best practice is to keep it around 1.5 EM.
  • Letter Spacing: Space the letters wider or narrower apart.