On Fixing Facebook’s News Feed Font

Tuesday morning, as I was settling down to my first cup of coffee for the day, I logged into Facebook and noticed something. No, not the big banner at the top of my news feed telling me that it was Election Day and which of my friends had already voted, though that was a useful reminder. Rather, I noticed that I could barely read my news feed. The words seemed smaller.

At first, I thought it was an eyesight problem; I had just gotten out of bed, after all, and the coffee had yet to kick in. Then, at work, I logged into Facebook again, and noticed that there, too, the typesize of the News Feed was still quite small. I decided that this was probably due to a bug with the software change that put the Election Day banner atop the newsfeed; after all, personal pages weren’t affected by small type.

Wednesday, the problem lingered. A friend complained about it as a Facebook status update. The type size was smaller. I didn’t really mind it (our work websites, for some reason, use 8pt Tahoma, so I’m used to websites with really tiny type), but surely there was some way to fix it.

A quick search this morning led me here — a Forbes article titled “Is Facebook’s New Font Size Too Small? Try Facebook Font Fixer. This led me to this GreaseMonkey script for Firefox, which I quickly set up in Opera, my browser of choice, as a User JavaScript script.

Not being a Firefox user, I’m not familiar with GreaseMonkey — Opera has features like this built in, under the hood — but it looks like it’s a pretty simple browser extention, and it’s all you Firefox users need to fix Facebook’s News Feed.

I wasn’t entirely pleased with the behavior of the script in Opera. Facebook’s home page would load at 11 point, and then it would magically snap to 13 point. That struck me as clunky. I looked at the script, and what it does, simply enough, is to add a stying rule to Facebook’s code when your browser loads the page that changes the point size for the News Feed from 11 pixels tall to 13 pixels tall. If that’s all the script did, then there’s surely a simpler solution — a custom stylesheet.

I deleted the User JS file, and wrote this CSS file instead:

#contentArea h6 { font-size: 13px !important; }

And I set Opera to call this stylesheet, naturally called facebook.css, whenever I loaded Facebook. I reloaded Facebook’s homepage, and no magical snapping. It looked “right” the first time. 🙂

On a side note, there is almost no information that I can find online on writing custom browser CSS for Facebook. You’d think, given the sheer number of people who use Facebook, that there would be far more information on writing custom CSS, like the ID and class names used by Facebook, than there is.

Firefox doesn’t make implementing custom CSS easy at all; here’s a how-to on how to do it. First, you need to know where to put the file. Then you need some additional code. However, if you follow the instructions I just linked to, here’s the code you need for the userContent.css file for Firefox:

@-moz-document domain(facebook.com) {
     #contentArea h6 { font-size: 13px !important; }
}

And if you want Facebook’s sidebar ads to go away, this line will do the trick:

#sidebar_ads div.fbEmu { display: none; }

(You can’t do a display: none; on the #sidebar_ads ID, because the page layout breaks pretty badly if you do. It’s poor layout design; it’s using the sidebar ads to force the main content into a specific place on the page.)

For Firefox, the complete code (including no ads) for userContent.css would be:

@-moz-document domain(facebook.com) {
     #contentArea h6 { font-size: 13px !important; }
     #sidebar_ads div.fbEmu { display: none; }
}

Because I like to be different, I changed Facebook so my browser uses Serif fonts instead of Sans-Serif fonts for the main content. (Sidebars and menus I left alone; they usually don’t handle custom CSS typography tampering well.) And because I could, I changed most links green.

No one else may want to look at Facebook in the same way, but for something a little different, my full facebook.css file for Opera reads as follows:

#contentArea,
#profile_minifeed,
.UIStandardFrame_Content {
     font-family: "Palatino Linotype", "Times New Roman", serif;
}

#contentArea h6 {
     font-size: 14px !important;
}

.uiAttachmentTitle,
.UIStoryAttachment_Title {
     font-size: 13px !important;
}

.commentContent,
.uiAttachmentDesc,
.UIStoryAttachment_Copy {
     font-size: 12px !important;
}

#sidebar_ads div.fbEmu,
#pagelet_adbox {
     display: none;
}

.UIIntentionalStory_Message a,
.UIRecentActivity_Body a {
     color: #006600 !important;
}

.commentContent a,
.uiListItem a,
.UIStoryAttachment_Caption a {
     color: #336600 !important;
}

.uiAttachmentTitle a,
.UIStoryAttachment_Title a,
.UIImageBlock_ICON_Content button,
.UIImageBlock_ICON_Content label,
.UIImageBlock_ICON_Content a,
.uiTextSubtitle label,
.cmnt_like_link,
.stat_elem,
.comment_link,
.ego_unit a {
     color: #009966 !important;
}

And, who knows? I may trick it out more. Or I may not. :h2g2:

None of this will break a browser. You do have to feel comfortable with modifying some files, especially with Firefox, or delving into directories where mortal man was never meant to go. I don’t mind. It’s fun to hack a website, like Facebook, to fix its deficiencies and bend it to my will. 😉