--- title: Change font size, color, family & style in Elementor website builder description: Many Elementor Widgets offer the ability to edit text color and typography settings. These design options are generally located in the widgets’ Style tab. --- [Skip to content](https://help.blakemarkdigital.co.uk/change-font-size-color-family-style-in-elementor-website-builder#main-content) English - United Kingdom Show submenu for translations [More support](https://help.blakemarkdigital.co.uk/kb-tickets/new) [Support Portal](https://help.blakemarkdigital.co.uk/support-portal) [![Blake Mark Digital Logo](https://help.blakemarkdigital.co.uk/hs-fs/hubfs/Asset%205.png?width=200&height=57&name=Asset%205.png)](https://blakemarkproductions.com/) Open main navigation Close main navigation - English - United Kingdom Show submenu for translations - [More support](https://help.blakemarkdigital.co.uk/kb-tickets/new) - [Support Portal](https://help.blakemarkdigital.co.uk/support-portal) - [Contact Support](https://help.blakemarkproductions.com/support-portal) [Contact Support](https://help.blakemarkproductions.com/support-portal) How can we help you? - There are no suggestions because the search field is empty. 1. [Knowledge Base](https://help.blakemarkdigital.co.uk/) 2. [Web Hosting](https://help.blakemarkdigital.co.uk/web-hosting) 3. [Elementor](https://help.blakemarkdigital.co.uk/web-hosting#elementor) # Change font size, color, family & style in Elementor website builder Many *Elementor Widgets* offer the ability to edit text color and typography settings. These design options are generally located in the widgets’ **Style tab**. #### Change font typography **To change font characteristics**: 1. In the panel, locate the **Typography** field. ![](https://elementor.com/help/wp-content/uploads/2020/03/Locate-the-typography-field.png) The typography field is usually in the **Style** tab. ![](https://elementor.com/help/wp-content/uploads/2020/03/Click-the-typography-globe-icon.png) 2. If you want to select one of the preset global fonts, click the globe ![](https://elementor.com/help/wp-content/uploads/2020/03/global-font-icon.png) icon. For details about global fonts, see [View and edit global fonts](https://elementor.com/help/view-and-edit-global-fonts/). ![](https://elementor.com/help/wp-content/uploads/2020/03/Click-the-pencil-icon.png) 3. If you want to select a font from among the entire range of fonts, click the pencil icon ![](https://elementor.com/help/wp-content/uploads/2020/03/Pencil-icon-2.png) . ![](https://elementor.com/help/wp-content/uploads/2020/03/The-typography-menu.png) The Typography menu opens. ![](https://elementor.com/help/wp-content/uploads/2020/03/Use-the-famuly-dropsdown-menu-to-select-what-fiot-type-1.png) 4. Use the **Family** dropdown menu to choose what type of font you want to use. If you know the name of the font family, you can enter it in the text box at the top of the dropdown menu. ![](https://elementor.com/help/wp-content/uploads/2020/03/Use-the-Size-slider.gif) 5. Use the **Size** slider to set how big you want the font. ![](https://elementor.com/help/wp-content/uploads/2020/03/Use-the-sliders.gif) To learn more about the different measurement systems, check out [Units of measurement](https://elementor.com/help/whats-the-difference-between-px-em-rem-vw-and-vh/). 6. Use the other sliders and dropdown menu to set the other font characteristics. For details about the different typography characteristics you can choose from, see [Typography](https://elementor.com/help/what-is-typography/). #### Change font color 1. In the panel, locate the **Text Color** field. ![](https://elementor.com/help/wp-content/uploads/2020/03/Select-text-color.png) The **Text Color** field is usually in the **Style** tab. ![](https://elementor.com/help/wp-content/uploads/2020/03/Select-the-global-color-icon.png) 2. To select one of the preset global colors, click the globe icon and select one of the global colors. For details, see [View and edit Global Colors](https://elementor.com/help/view-and-edit-global-colors/). ![](https://elementor.com/help/wp-content/uploads/2020/03/click-the-color-swatch.png) 3. To select a text color from the entire range of colors, click the color swatch ![](https://elementor.com/help/wp-content/uploads/2020/03/Color-swatch.png). For details about using the color picker, see [Pick a color](https://elementor.com/help/choose-color/). The text color is changed. - [Getting Started](https://help.blakemarkdigital.co.uk/getting-started) - [Web Hosting](https://help.blakemarkdigital.co.uk/web-hosting#main-content) - [Elementor](https://help.blakemarkdigital.co.uk/web-hosting#elementor) - [WordPress](https://help.blakemarkdigital.co.uk/web-hosting#wordpress) - [Security](https://help.blakemarkdigital.co.uk/web-hosting#security) - [Email](https://help.blakemarkdigital.co.uk/email#main-content) - [Mail Clients](https://help.blakemarkdigital.co.uk/email#mail-clients) - [SpamExperts](https://help.blakemarkdigital.co.uk/email#spamexperts) - [MailChannels](https://help.blakemarkdigital.co.uk/email#mailchannels) - [Domains](https://help.blakemarkdigital.co.uk/domains#main-content) - [Domain Privacy](https://help.blakemarkdigital.co.uk/domains#domain-privacy) - [Billing](https://help.blakemarkdigital.co.uk/billing) - [cPanel](https://help.blakemarkdigital.co.uk/cpanel#main-content) - [JetBackup](https://help.blakemarkdigital.co.uk/cpanel#jetbackup) - [Softaculous](https://help.blakemarkdigital.co.uk/cpanel#softaculous) - [WordPress Glossary Terms](https://help.blakemarkdigital.co.uk/wordpress-glossary-terms#main-content) - [H](https://help.blakemarkdigital.co.uk/wordpress-glossary-terms#h) [![Blake Mark Digital Logo](https://help.blakemarkdigital.co.uk/hs-fs/hubfs/Asset%205.png?width=250&height=71&name=Asset%205.png "Blake Mark Digital Logo")](https://blakemarkdigital.co.uk/) Blake Mark Digital is a digital marketing agency supporting SMEs and non-profits with strategic branding, content, and campaigns that drive real results 124-128 City Road, London, EC1V 2NX [support@blakemarkdigital.co.uk](mailto:support@blakemarkdigital.co.uk) +44 20 4578 9582 [mailto:support@blakemarkproductions.com](mailto:support@blakemarkproductions.com) Copyright © Blake Mark Productions Ltd