Saturday, 31 May 2014

How to change the font on Twitter in Firefox and Chrome

So yesterday evening, Twitter decided to change its website's font from Helvetica Neue to Gotham for no apparent reason and lots of users despise it, either because it doesn't look right or because tweets are now harder to read. Fortunately, if you're using Firefox or Chrome, you can override this new font and change it back to how it was before.

Firefox Users

  1. Locate your Firefox profile folder. If you're using Windows, the file URI should be something along the lines of C:\Users\[your login name]\AppData\Roaming\Mozilla\Firefox\Profiles\xxxxxxxx.default.
    You can either traverse through your hard-drive in Windows Explorer (note: AppData is a hidden file), or you can:
    • open the Help menu
    • click Troubleshooting Information to open the about:support page
    • click the Show Folder/Open Directory/Show in Finder button under Application Basics, in the Profile Folder row

  2. Open the chrome folder if it exists. Otherwise, create a new folder with this name here.

  3. Use a text editor like Notepad to open the userContent.css file. If it doesn't exist, create and save it in the chrome folder.

  4. Add the following text to userContent.css:
    @namespace url(http://www.w3.org/1999/xhtml);
    @-moz-document url-prefix(http://twitter.com/) {
        * {
     font-family: "Helvetica Neue", Arial, sans-serif;
        }
    }
  5. Save.

  6. Restart Firefox.

Chrome users

  1. Locate your User StyleSheets folder. If you're using Windows, the file URI should be something along the lines of C:\Users\[your login name]\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\.(note: AppData is a hidden file).

  2. Use a text editor like Notepad to open the Custom.css file. If it doesn't exist, create and save it in the User StyleSheets folder.

  3. Add the following text to Custom.css:
    @namespace url(http://www.w3.org/1999/xhtml);
    @-moz-document url-prefix(http://twitter.com/) {
        * {
     font-family: "Helvetica Neue", Arial, sans-serif;
        }
    }
  4. Save.

This will force your browser to render all text on the Twitter website in Helvetica Neue, or failing that, some other sans-serif font like Arial. You could replace "Helvetica Neue" with any other typeface you want (even Comic Sans), although you should probably stick with web safe fonts. If you're a whiz at CSS, you could try experimenting with different font properties such as font-size, font-weight, font-style, or you could replace the universal selector (*) with more specific selectors, but this goes beyond the scope of this blogpost. Or you could download and install an add-on like Stylish, which makes the process of creating your own styles a lot easier than having to edit an obscure file and constantly restarting the browser.

As a small bonus, you can even add the following code to your userContent.css or Custom.css file to stop the Twitter website from displaying the photos and videos in tweets by default (many thanks to Fix Twitter for writing this!)

div.stream-item-footer + div { display: none !important; }
.expansion-container div.stream-item-footer + div { display: block !important; }
ol.expanded-conversation div.js-macaw-cards-iframe-container[data-card-name^=”player”][data-src*=”autoplay”] { display: none; }
ol.expanded-conversation div.media-preview-container > div { display: block !important; }
div.bottom-tweet-actions { display: inline; margin-top: 0px ;}


Enjoy your improved web Twitter experience!