Firefox Extension for Web Development: Font Finder

By - Tyme

Quite often, I will be visiting a website and wonder about a certain font that is used. While years as a typographer and a Web designer have given me a keen eye for type styles, sometimes I need to peek at the CSS. Normally, this would entail launching Firebug and using the inspection tool to highlight my target of curiosity.

screenshot of Firefox Font Finder extension

I now have employed a better (quicker!) tool: the Font Finder extension. This add-on lets you analyze the full CSS font detail for an element and modify those specifications as non-destructive edits, helping you conceptualize your site with a different font presence.

The New York Times website is a good example of font use. Its variation of fonts and sizes creates visual appeal and helps to differentiate parts of content. This site will serve as my example for demonstrating this extension.

Analyzing Font Detail

screenshot of Firefox Link Checker extension

To deploy the Font Finder analysis tool, click its icon on the taskbar. When it is activated, the icon's white background will change to orange to indicate its ready status.

Once the analysis tool is hot, click an element of a page to see the font details, as shown below in the example for the headline.

screenshot of Firefox Font Finder extension

Adjusting Font Detail

To modify any of the font styles, first right click to open the context menu. Then, from the FontFinder options, select the action that you wish to take.

screenshot of Firefox Font Finder extension

Experimenting with line-height is one of the better uses of this extension. From the Font Finder context menu, select "Adjust element's..." | "Line height", and with the transformed plus-sign cursor, click on an element to target it. After which, a dialog box will appear with the current setting; enter a new value and click the "OK" button. Your modifications will appear immediately, as demonstrated in the screenshot below. Remember, these are non-destructive edits, so refresh the page to clear them.

screenshot of Firefox Font Finder extension

Another adjustment that you can make is to the element's font family. Select "Font family" from the context menu, then select the exact element that you wish to change. Or, select "Replace font (entire DOM)" to change all page-wide instances of the font to another of your choice.

screenshot of Firefox Font Finder extension

After the adjustment:

screenshot of Firefox Font Finder extension

Disable Font Family

Disabling a page-wide family of fonts is useful for seeing the page as a visitor would if he/she did not have your specified font family installed. Often, new Web designers pick their favorite fonts from their own computer without considering that the font doesn't exist for all users. You should always use a generic font family, for this reason.

Summary

I like this tool. It saves me a few clicks. I couldn't make the copy feature work (in FireFox 3.6.16), or couldn't figure out the mystery of how. (It is supposed to copy the element's data to clipboard.) Too bad, because I would like the opportunity to paste that data into my stylesheet. Overall, a good effort by developers Ben Dodson, Eric Caron, Jake Smith.


Tyme is a freelance writer and multimedia specialist of many years. She likes walks in the park, cotton candy, and baby ducks. To learn more: MultimediaByTyme.com.



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date