YouTube Gallery Font

I am having issues getting the font in the YouTube Gallery (Title / Description / Views) to change from what looks like Times to another font. I have tried adding this code to the CSS section under colors, but no luck. Any help appreciated.

[class^=“yottie-widget-inner”] {
font-family: Arial;
}

* Link to the page with the widget in question:

2 Likes

Hello @Rehab_Industries and welcome aboard :tada:

Unfortunately, due to the peculiarities of the Wix platform, our app supports only the most popular fonts, my apologies for the inconvenience!

However, I’m happy to say that we have two workarounds here:

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

Please add the CSS code above right after the widget’s installation code and you are good.

  1. You can also apply any free Google font you wish to the widget.
    Here is an article that explains how you can do it - How to change the font of the widget on Wix.

Please let me know if it worked or if there’s anything else I could do for you.

2 Likes

this worked perfectly! thank you

2 Likes

No sweat!

Have a great day :wink:

2 Likes

Hi Max I just stumbled upon this question and I have a similar problem and I’m not sure that I understand the solution.

I have embedded a Youtube feed widget on my wix website:

https://www.4kvideowalks.com/

(This is a work in progress)

As you can see there is a serif font on the feed that I wish to change.

I have tried, but failed to change the font using a Google font…can you help?

Thankyou!

1 Like

Hi there and welcome aboard @user10874 :wave:

I’ve inspected your webpage and haven’t found the font style attribute next to the widget installation code and Import URL code:

Could you please double-check the article and try to follow the steps again?

Also, you are very welcome to check the first solution, by adding this code right after your widget’s installation code:

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

The first font that is enabled on your website will be applied to your widget right away.

If both workarounds didn’t work, could you please specify what font you’d like to apply to your widget?

thankyou Max,

I’ve had another look and I’ve got it to work.

The problem I believe was that the codes on the Google Fonts website had “Roboto” NOT ‘Roboto’…

It seems to be working correctly now.

1 Like

Great! You are always welcome :slightly_smiling_face:

Hi Max, sorry to bother you again.

I still don’t have this widget working satisfactorily.

The font on the widget has not picked up ‘Roboto’ when one clicks on a video and the video pops out. We have the default serif font instead on the pop out.

https://www.4kvideowalks.com/

Any idea how I can make ‘Roboto’ the ONLY font displayed with this widget?

Thanks again.

1 Like

Hi @user10874 :wave:

We’ve added this code to the Custom CSS field on the Appearance tab of your widget’s settings and now everything seems to be working fine:

.global-styles, 
.yottie-widget-inner, 
.yottie-popup {
  font-family: Roboto, sans-serif;
}

Check it out and let me know how it looks on your end :slightly_smiling_face:

That’s perfect.

Thankyou Max!

2 Likes

Great, you are welcome!

In the meantime, I’d like to remind you that we have a CSS Codes category where you can find the most popular codes for different apps (including YouTube Gallery). Feel free to check it :slightly_smiling_face: