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.
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
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.