Changing font in X (twitter)

[user28236]

Hi all,

I am a new user of elfsight and am testing whether it is a good fit to my website in Google Sites.

For the Linkedin widget, it has the option to select font. I selected “Noto Sans” and it works well in my Google Sites.

For the X widget, it does not have the option to select font, and I tried to follow the instruction here to use “Noto Sans” – Customisable twitter font size and type of font – but it does not work. I don’t see the font change in my website

Can anyone able to help?

The css code used:

.eapps-twitter-feed-container{
font-family: ‘Noto Sans’;
}

Thank you very much.

Jake

[Max]

Welcome to the Community, @user28236

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

The good news is that apply any free Google font you wish to the widget.

Here is an article that explains how you can do it. Although the article is for the Wix platform, the workaround described there should work for Google Sites as well.

Please try it out and let me know if it helped

[user28236]

Hi Max,

Thank you for the reply. I tried but it didn’t work. The article and its Youtube video are outdated – Google Fonts has updated certain elements.

I tried to follow as much as I could and embedded the following into the Google Sites

<!-- Elfsight Twitter Feed | Untitled Twitter Feed -->
<script src="https://elfsightcdn.com/platform.js" async></script>
<div class="elfsight-app-87940a59-a8a9-44ae-a8ce-a87fd1ff8b5c" data-elfsight-app-lazy style="font-family: "Noto Sans", sans-serif;"></div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
</style>

And it did not work.

Please provide further instruction.

Here is the Noto Sans font I am trying to use: https://fonts.google.com/noto/specimen/Noto+Sans

As the Linkedin Widget has the GUI font change option, I am disappointed that it’s not done in the rest of the widgets to make life easier.

Best,

Jake

[Max]

Could you please send me a link to the page, where your widget is installed? I’ll be happy to look into this

[user28236]

Hi Max,

Thanks for the prompt response. I tried to play around with it further with my limited CSS knowledge.

By combining the information from these 2 pages:

Customisable twitter font size and type of font

Would really be of benefit to be able to customise the EMBED Twitter feed text font SIZE and TYPE OF FONT, to enable the widget to fit in with the rest of a website, rather than looking small text and out of place, my site has a font size of “30” with font “Bliss Regular”

How to change the font of the widget on Wix - Elfsight Help Center

I ended up a CSS as:

.eapps-twitter-feed-container{
font-family: “Noto Sans”, sans-serif;
}

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

and I put it in elfsight → twitter (X) widget → edit → style → custom CSS.

Then I clicked “published” on the top right, and closed the page, then clicked “install” and copied the embedded code to Google Sites, then it works.

Thank you very much.

Jake

[Max]

Glad to know everything is fine now!

If anything else comes up, we’ll be happy to help

[Max]

In the meantime, we’d like to invite you to participate in our August Contest, where you can win a 6-month extension for your subscription - August Contest: Celebrate 100K Users with us and win 6 FREE Months!

Check the details and join in