Override fonts for specific websites

September 21, 2006 4:11 PM

My eyesight just isn't what it used to be. How do I force specific websites to show up with a larger font in Firefox?

I've tried Tools/Options/Advanced and set the Minimum font size to 12, but then some sites I visit end up getting all screwed up. I really want to selectively change, say The Morning News or Kottke.org so the text are larger than mouse poop, but meanwhile, not screw up the formatting when I go to Audible.com, which is what happens if I change the universal minimum font size.

posted by crunchland to Technology (19 answers total)

Hold down Ctrl and roll your mousewheel in the page. You can change it on the fly to fit each website as you prefer.
posted by 999 at 4:13 PM on September 21, 2006

Have you tried the number pad in opera? 0 scales everything up---including images---so nicely.
posted by DenOfSizer at 4:20 PM on September 21, 2006

What 999 said- some sites I seem to read better at larger fonts, and it's a split-second decision to simply adjust the text bigger if on page load it looks too small. I like doing ctrl+, since it jumps in increments and I can revert it back if it screws up the formatting or layout by a known amount using ctrl-
posted by hincandenza at 4:21 PM on September 21, 2006

One of the most needed non-existent extensions for Firefox is saving settings on a per site basis. Anyway, what they said -- Ctrl-+ and Ctrl-- are your best bets for now.
posted by Zed_Lopez at 4:28 PM on September 21, 2006

Tools -> Options...
Hit the Content Tab
Under "Fonts & Colors" hit the "Advanced..." Button
Change the "Minimum Font Size" to something you can read
posted by telseth at 4:33 PM on September 21, 2006

I guess i should finish reading before i post sorry
posted by telseth at 4:34 PM on September 21, 2006

If you know any programming, you could probably write some JavaScript and use Greasemonkey to set the font size for specific sites. Even if you don't know any, you may still be able to find a Greasemonkey script that does this.
posted by blm at 4:46 PM on September 21, 2006

I see two options:

1)You can go up to your toolbar at the top on select pages and go view then text size then increase (or decrease). This gets tiresome quickly though.

2)Or do what I do (since I can't see as good as I used to either) and install the lovely mouse gestures extension. I can only use about 3 or 4 of them including the increase or decrease font size gestures. Here are the supported gestures. Creating a forward slash by starting at the top and moving downward to the right increases font size. Starting ant the bottom and moving backwards and upwards to make a slash decreases the font size. It's listed under image functions. it's a quick and easy way to change font sizes at whim.
posted by bim at 4:53 PM on September 21, 2006

You've done all you can do. You can't tweak the settings in Firefox and still get every website to look as it should.

This goes to the heart of a philsophical divide between web designers and browser authors: web designers want to specify how their site will look, browser authors say it should look however the end user damn well pleases.

Just so we're talking about the same thing, here is how the NYTimes homepage looks for me after tweaking my settings in Firefox similar to how you have done:

I'm not a web designer, so I don't have the vocabulary to explain precisely why this happens, but clearly some websites handle end-user font size settings better than others. Interestingly, when I view the Times through IE (where I have not mucked with the default settings) the increase/decrease fonts works fine, and the left-hand column expands as necessary to accommodate the text. In FF, the size of the left-hand column remains static.

I've learned to live with it. I suppose there may be some fancy pants extension, or a Greasemonkey thingy as someone mentioned, but it's just not that big of a deal for me anymore.
posted by Brian James at 4:54 PM on September 21, 2006 [1 favorite]

Another problem with Cntrl-+/- is that for common layout types (e.g. content column in the middle with left and right junkish columns), when you increase size several times, you wind up with essentially the content being formatted for a very narrow column.

While there are specific greasemonkey scripts which help this problem (such as Slashdot Sidebar Toggle) there is as of yet no general solution.

One of these days I hope to write in greasemonkey a general content column width enhancer.
posted by MonkeySaltedNuts at 4:56 PM on September 21, 2006

Opps. I should say that this works for text as well as images. I just pcik a white spot off to the side and then do the gesture to increase my font .
posted by bim at 4:57 PM on September 21, 2006

You're lucky, I have my minimum font size set to 14 - and I still have to increase it for some sites.

Also, I'm only 25;-)
posted by invisible ink at 5:25 PM on September 21, 2006

Best answer: You can do this by editing your User Style Sheet to contain per-site rules. For example, to make fonts on www.example.com larger you would have something like:

@-moz-document domain(example.com)
{
body { font-size: 16px !important; }
}
posted by mbrubeck at 5:26 PM on September 21, 2006 [1 favorite]

i go to "view" and then "increase text size" in the toolbar. it makes some pages look crappy, but i'd rather be able to read them!
posted by sdn at 6:26 PM on September 21, 2006

I have had my minimum font size set to 16px globally for 3 years. The amount of brokenness on the web is tolerable, and I use Opera's user-style mode if navigation ever overlaps the text.
posted by aye at 6:51 PM on September 21, 2006

Response by poster: Yeah. Thanks to all who suggested I change the font size manually every time I load the page, but doing that is why I was looking for a better solution. This is the 21st century, dammit. I shouldn't have to do that repetitive crap.
posted by crunchland at 7:03 PM on September 21, 2006

The ease with which FF changes font sizes was what hooked me on FF, before I got used to tabbed browsing.

I like my monitor at full resolution, but that makes reading often difficult. And curse web developers that design pages that don't accomodate this.
posted by Goofyy at 12:13 AM on September 22, 2006

The FireFoxMenuButtons extension includes text size increase and decrease buttons that work well for my needs.
posted by Idcoytco at 3:34 AM on September 22, 2006

Response by poster: fwiw, this worked exactly the way I wanted it to using Stylish :

@-moz-document domain("kottke.org") {
a, span, div, p, li {
font-size: 14px !important;}
}
posted by crunchland at 7:52 AM on September 22, 2006