How to change font type in twitter.com widget?

Question

I have some basic knowledge in coding, most of which I learned through reading.

I'm using wordpress for my website. Now I like the official twitter widget but the only downside for it is the limited options of styling.

I've checked the available styling options, but couldn't find any which allows me to change the font size.

So I thought I'd try to import the javascript file ( here: http://platform.twitter.com/widgets.js ) and see if I can change anything in it. So I searched for "font" and edited the default font in the file then uploaded it to my website, but it didn't affect how the font appears.

Is there a simple way to enforce changing the predefined css of the widget?

Answer 1

The only solution I found with Twitter's Enhanced Timeline is to use javascript to modify the css after the iframe has loaded.

Needed to use window.setTimeout for it.

window.setTimeout(function(){
    $(".twitter-timeline").contents().find(".e-entry-title").css("font-family","sans-serif");
    $(".twitter-timeline").contents().find(".tweet").css("font-family","sans-serif");
  }, 1000);

I'm not saying I'm "proud" of using setTimeout, but when my wife wants a styled Twitter's widget for her site, she GETS a styled Twitter widget.

Answer 2

Twitter does not allow you to change font-size or font-family just with settings.

you can't style content of an iframe originating on another domain either.

There seems to be a solution when you get the javascript files yourself like you say:

http://www.petermoss.com/post/how-to-change-Twitter-widgets-font-size-or-color.aspx

To change the font of your tweets you have to change the following CSS class in widget.js (on your own server):

.twtr-tweet-text {
    font size: 105%;
    font-family: Georgia, Serif;
}

Another possible solution is to implement the widget yourself using their JSON api:

https://dev.twitter.com/docs/api/1/get/search

Or use another third party widget like below:

• http://tweet.seaofclouds.com/
• https://code.google.com/p/twitterjs/downloads/list