Change the iTunes widget's font

Today's Best Tech Deals

Picked by Macworld's Editors

Top Deals On Great Products

Picked by Techconnect's Editors

If it’s Friday, it must be time for another fun Dashboard widget modification. This time, we’ll be changing the display font used in the iTunes widget. Specifically, we’re going to change the font that’s used to display the song and time information.

The first step is to make a copy of the widget that you can safely modify. The best way to do that is explained in this hint. Basically, you just drag a copy of Apple’s iTunes widget from the top-level Library/Widgets folder into your user’s Library/Widgets folder.

Once you’ve copied the widget to your user’s Widgets folder, navigate to that folder, control-click on the iTunes widget, and select Show Package Contents from the pop-up menu. In the new folder that opens, open the file called iTunes.css in a pure-text editor, such as TextWrangler or TextEdit (just make sure TextEdit is in plain text mode first—Format: Make Plain Text).

When the file opens, the sections you’re going to modify are found right near the top:

	#titleDisplay {

color: #393F21;
font: 11px "Lucida Grande", sans-serif;
text-align: center;
position: absolute;
top: 33px;
left: 115px;
width: 128px;
height: 15px;

#timeDisplay {
color: #393F21;
font: 11px "Lucida Grande", sans-serif;
text-align: center;
position: absolute;
top: 68px;
left: 157px;
width: 46px;
height: 12px;

The first block controls the appearance of the song information, while the second controls the display of the time. The two lines you can (easily and safely) edit are the same in each section:

	color: #393F21;

font: 11px "Lucida Grande", sans-serif;

As you might guess, that first line controls the color of the text. The colors on the first line are specified in hexadecimal values. What are those, and how do you figure them out? There are a lot of graphics tools, such as Photoshop Elements or Graphic Converter, that can generate hex color values. But you’ve also got a free one on your Mac—it’s called DigitalColor Meter, and its found in in Applications: Utilities. Its simple interface looks like this:

Once you’ve launched DigitalColor Meter, set the pop-up menu to RGB as Hex Value, 8-bit, then start moving your cursor around the screen. You’ll notice that the utility converts whatever color your cursor is hovering over to hex values. When you find a color you like, hit Command-L to lock it in. You can then you can move your mouse to your editor to copy the hex values into that color code line in iTunes.css. For instance, from the screenshot above, the green color would be entered in the iTunes.css file like this:

color: #7CA033;

As for the font, you can use pretty much any one you like. The current font line (in both sections) reads like this:

font: 11px "Lucida Grande", sans-serif;

The way a CSS file works, it will use the first font listed (Lucida Grande in this case). Since CSS is typically used on the web, and not every user will have every font, you typically list some alternative fonts or styles, separated by commas. In this case, if the Lucide Grande font is missing, the widget will fall back to the generically-defined sans-serif font. But since this is your Mac, and you’re editing the CSS file, you can replace those two fonts with the name of any one font on your machine—there’s no need to worry about font replacement, since you know you’ve got the font! For instance:

font: 11px "Arial Narrow";

The only slightly tricky bit is figuring out what font name to use. Arial and Times are simple. But what about something more complex, like “Academy Engraved LET Fonts?” In most cases, the name of the font as shown in the Finder will be the name of the font to use in the CSS file. But if you’re not sure, launch Font Book (in /Applications), select the font you want, then press Command-I. In the font’s Info window, you’ll see the font name you want next to “Family.” In this example, that would be “Academy Engraved LET.” Any time your font name includes more than one word, you must enclose its name in quotes.

You can also change the font sizes; those are the 11px bits at the start of each font: line. However, you probably don’t want to go much larger than 11px, as there’s not a lot of display area to work with.

Make the changes you wish for font color, family, and size in both the name and time sections of the code, then save the file. Press F12 to bring up Dashboard, then open the iTunes widget—OS X will automatically read your modified widget first. You should see your newly-modified iTunes widget:

You can leave the CSS file open in your editor, switch back and make more changes, then reactivate Dashboard. Hit Command-R to refresh your widget to see the newest changes. If something happens to go wrong and your iTunes widget no longer works, the fix is simple—just trash the copy you made in your user’s Library/Widgets folder, and start over with a fresh copy from the top-level Library.

Note: When you purchase something after clicking links in our articles, we may earn a small commission. Read our affiliate link policy for more details.
Shop Tech Products at Amazon