Styling a Twitter feed - CSS won't target .timeline-Tweet-text

Question

I'm bringing a Twitter feed through to my site using the following code which is described on https://publish.twitter.com/

<a class="twitter-timeline" href="https://twitter.com/ACCOUNT-HERE" data-tweet-limit="3">Tweets by</a> 
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

The feed is displayed correctly. However it uses CSS which is provided via Twitter.

When I inspect it using Chrome dev tools I can see the following classes around the Tweets:

<p class="timeline-Tweet-text" lang="en" dir="ltr">

So I thought it would be a simple case of targetting this in CSS, e.g.

.timeline-Tweet-text {
}

However, this doesn't apply any styles to the Tweets. Why not?

I have also referred to Twitters guidance on this here https://dev.twitter.com/web/overview/css but that also doesn't work.

The only reason I want to do this is so the font used within the widget matches the font used by the rest of the body text on my website.

Answer 1

Simply adding a style rule to your top-level page won't work, because they are two different and isolated documents as far as the browser is concerned.

However, with the use of kevinburke's Customize Twitter 1.1 project, you should be able to embed CSS into a timeline. It does this by injecting a link to an external CSS file directly into the contents of the document within that frame.

In Kevin's published example, It makes all the text white, which looks a bit broken, but when I took this example and adjusted it to also turn the background red, we can see it's working as intended and you can therefore make any adjustments you like, provided you have a CSS file for it.

Note that this is only possible because Twitter have configured platform.twitter.com so that it can be embedded in frames. For security reasons, many websites will nowadays send a HTTP response header to prevent framing of the content, to avoid people meddling with their contents.