How to change the font of the widget on Wix

Sometimes, the font in your Wix website widget might look different from what you see in your Elfsight dashboard. This is because Wix only supports a few fonts for our app.

But don’t worry, we have 2 workarounds for you! Here we go :rocket:

Changing the font using CSS code

You can use this CSS code containing all the supported fonts. The first font that is enabled on your website will be applied to your widget right away:

<!doctype html>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
</style>

Just add the CSS code above right after the widget’s installation code and you’ll be fine :slightly_smiling_face:


Changing the font using Google fonts

You can also apply any free Google font you wish to the widget. That’s a breeze, just follow these steps:

Choose a free Google font with Regular 400 font-weight


Copy CSS rules to specify families and paste them to the second line of your widget's installation code with this attribute: style="..."


Add the widget code to your website


Go back to your Google font, click @import, copy the code


Add this code to your website right after the widget's installation code



Still experiencing difficulties or having questions? Drop us a line in the comments and we’ll be happy to assist :raised_hands: