Making Google Docs pretty with user-supplied CSS

This tip comes via Merlin Mann, but since the tip was buried in a recent Macbreak Weekly podcast, I thought it would be helpful to surface here.

With Google Docs you can change a document look and feel with plain-Jane CSS editing. This is available from within Google Docs; with an open document go to Edit->Edit CSS. Inside the window that is displayed add any CSS rules you want to style your document with. The CSS doesn’t quite stay with the document if you export to Microsoft Word (it appears to make a best-guess), but internally to Google Docs (including exporting as PDF) the styling persists for the life of the document. Using Merlin Mann’s user-supplied CSS allows you to create really attractive Google Docs documents. Further, inside the CSS rules for font-family, you can supply your own system-only fonts within the font-stack, so you aren’t limited to Google Docs’ poor typefaces. Obviously, if you open the document on another machine that doesn’t have that local font available, it will not work and will instead default to the next item in the font stack.

You can download Merlin Mann’s user-supplied CSS here (includes specific instructions).

Use pretty fonts everywhere: a bookmarklet to use any system font on any page

I use Instapaper all the time, and I love it. It is beautiful and simple and elegant and wonderful.

All Instapaper needs is some options for alternative, elegant fonts, to add a little spice to an other repetitive reading experience. There are lots of ways of loading in your own CSS on most browsers (user specified CSS through preferences, Greasemonkey, etc.), but I like the ease and flexibility of bookmarklets. It is especially handy to have your bookmarklets follow you around if you use multiple computers: sync with either XMarks or Mozilla Weave.

Given this need, I’ve made a very simple bookmarklet that uses jQuery (hosted on Google’s CDN) to swap the HTML body font-family for Lucida Bright (although any font available on your system is possible). The jQuery is added using the “jQuerify” bookmarklet suggested by Resig himself, and the jQuery command is dead-easy.

To install simply drag System Font to your bookmark toolbar.

To customize simply click on the properties of the bookmarklet and change ‘Lucida Bright’ to any font name you have available on your system