How to Fix Font Mismatch in Elfsight Widgets

If your Elfsight widget uses a different font from your website, it may be because the widget cannot access your website’s font styles. This article explains why this happens and how to apply and import your preferred font to the widget.

Why Fonts Don’t Match

If your platform loads embedded content inside an iframe, the widget cannot access your website styles, including fonts. As a result, it cannot automatically inherit the font used on your website.

This is common for platforms like Wix, GoDaddy, Google Sites, and others. When possible, we recommend installing the widget without an iframe so it can inherit your website's font. Learn more here: How Fonts Work in Elfsight Widgets.

If you don’t want to reinstall the widget or your platform doesn’t support this option, you can apply the font manually using custom CSS, for example, by importing it from Google Fonts.

How to Import a Google Font

1

Go to Google Fonts and type the font you want to import in the search bar. Click on the search result:

2

Click Get font in the upper-right corner → Get embed code:

3

Choose @import and copy the first code snippet without the <style> tags:

4

To create CSS code, use the following template:

FONT URL
* {     
    font-family: 'FONT NAME', sans-serif !important; 
}
	

Replace FONT URL with the line you copied in Step 3, and replace FONT NAME with the name of your font. Here's what it looks like with the Lato font:

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&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:

Depending on the widget, you may find Custom CSS under the Settings, Style, or Appearance tab.

6

Publish your widget to apply the changes on your website:

The imported font may not appear in the widget editor. This is expected — it will be applied on your live website.

That's it! Your widget is now perfectly styled to match your site. Enjoy customizing!

Still having trouble with your widget font? Contact our Support Team and share the link to the page with the widget. We'll be happy to help! 🙌