How to Change Font in Your Widget

Changing the font in our widgets is easy and can be done in several ways. Let’s explore your options!

How to Change Font in Widget Editor

1

Using Built-in Fonts

The simplest way to change your font is by selecting one from the built-in list. You can find this option in the following places:

• Appearance tab (or Theme, Style, or Design tab) for most widgets:
• Builder tab for text elements in form widgets (e.g., Popup, Form Builder, Contact Form):

2

Using Custom CSS

If the font you're looking for isn’t listed or you want to apply a unique font, you can use custom CSS. Here’s where you can add your custom CSS:

• Settings tab:
• Appearance tab (or Theme, Style, or Design):
  Need help with the CSS code? Check out our guide on How to Add Custom Font with CSS below. 🌟

How to Add Custom Font with CSS

If the font you need isn't available in the built-in list, you can add your own using custom CSS:

• If the font is already installed on your website, you can apply it to the widget by targeting its CSS classes. See how in the Using CSS Code from Elfsight Database section.
• If you'd like to use a font from Google Fonts, check out the guide on Importing from Google Fonts.

Using CSS Code from Elfsight Database

1

Open our CSS Codes Database, choose your app from the dropdown, and find a topic related to font changes:

2

Copy the code you found:

3

Paste the code into the Custom CSS section of your widget editor:

Importing from Google Fonts

1

Go to https://fonts.google.com/ and type the font you want to import in the search bar:

2

Click Get font:

Click Get Embed Code:

3

Choose @import, remove the styles you don't need in the left column, and copy the code without <style> tags:

4

Use the following code template:

Google Font URL
* {     
    font-family: 'Font Name', sans-serif !important; 
}
	

Replace Google Font URL with the code line you copied from step 3, and replace Font Name with the name of the font you're going to use:

@import url('https://fonts.googleapis.com/css2?family=FontNamne&display=swap');
* {
    font-family: 'Lato', sans-serif !important;
}
	

5

Copy the final code and paste it into the Custom CSS section of your widget editor:

Once you've added your custom font, your widget will have the perfect look to match your site's style. Happy customizing! 🎨