Whatfont Firefox



What is the fastest way to identify the fonts used in a webpage? Well, you may use Firebug or Webkit Inspector to figure out the font by viewing the page source, but it is too complicated and time-consuming. With WhatFont, you can now find the fonts used in a webpage with just one click.

As the name suggests, this browser extension dedicated to identifying fonts used on the website. FontFace is much like FontFace Ninja, it can determine font name, font family, size, style, height, width, weight, and color, but comes with a more minimalistic interface. To turn off WhatFont, click again on the icon or click on the Exit WhatFont button below the bookmark bar. Font Finder – for Firefox, Chrome, and Opera. Font Finder is a feature-rich add-on for Firefox to identify fonts and other relevant information. The add-on offers information regarding page elements, structure, and more, apart from.

WhatFont is a web browser extention/bookmarklet tool that enables you to easily find out the font information about the body text and title text on any webpage. It currently supports all major browsers including Chrome, Firefox, Safari, Opera, Internet Explorer.

WhatFont ← Drag this to your bookmark bar to install. On any webpage, click your WhatFont bookmark to use the tool. Full support: Firefox 3.6+, Chrome 9+, Safari 4+, Internet Explorer 9. Limited support: Internet Explorer 8. ↑Install the extension from Chrome Web Store. On any webpage, click WhatFont button to use the tool. The default font dropdown here specifies what font is used when the website does not specify any font family at all. If you want to change which fonts are used if only a generic font family like serif, sans-serif or monospace is specified in the website's style sheets, you click on Advanced. To open the dialogue below.

To use it is really easy, after you have added it to your browser, refresh any already loaded webpages that you want to use it on and click on the bookmarklet or extension. Now when you hover over any text, the font name that sets the text will be displayed. If you click on it, you will get a pop-up with more detailed information such as the font family, size, line height, color and sometimes the source of the font.

For example, the image above is a screenshot from LadyGaga.com, as you can see that using WhatFont we find the webpage uses Nimbus Sans Regular for the article titles and the font is served by Typekit, a renowned subscription font service.

WhatFont is available as an extension for Chrome and Safari, and as a bookmarklet for other browsers. Now it is also available as an app for iOS devices, available on iPhone, iPad and iPod Touch with iOS 8. For details about installing and using it, you can visit its website.

This article describes how to customize the way you see web pages by choosing your preferred font styles and colors.

Table of Contents

  • 1Changing Font
  • 2Change Font Color

To change the font:

  1. In the Menu bar at the top of the screen, click Firefox and select Preferences.Click the menu button and select ...
  2. In the General panel, go down to Language and Appearance.
  3. Under Fonts and Colors, use the drop-down menus to select the font and font size of your choice.
  4. Close the about:preferences page. Any changes you've made will automatically be saved.

Custom Fonts

Some websites have custom fonts; to disable them:

  1. In the Menu bar at the top of the screen, click Firefox and select Preferences.Click the menu button and select ...
  2. In the General panel, go down to Language and Appearance.
  3. Under Fonts and Colors, click the button.
  4. In the Fonts dialog that opens, uncheck Allow pages to choose their own fonts, instead of your selections above.
  5. Click to close the Fonts window.
  6. Close the about:preferences page. Any changes you've made will automatically be saved.

Other settings for Fonts

  1. From the Fonts for drop-down list in the Fonts dialog, choose a language group/script.
    • For instance, to set default fonts for the West European languages/scripts (Latin), choose Latin. For a language/script not in the list, choose Other Writing Systems.
  2. Select whether proportional text should be serif (like 'Times New Roman') or sans-serif (like 'Arial'). Then specify the font size you want for proportional text.
  3. Specify the font to use for Serif, Sans-serif and Monospace fonts. You can also change the size for Monospace fonts.

You can also set the minimum web page font size. This is useful to prevent sites from using overly small fonts that are barely readable.

  • Text Encoding for Legacy Content: The text encoding selected here will be used to display pages that don't specify which encoding to use.

To change the font color:

  1. In the Menu bar at the top of the screen, click Firefox and select Preferences.Click the menu button and select ...
  2. In the General panel, go down to Language and Appearance.
  3. Under Fonts and Colors, click the button.
  4. Clicking on any of the colored rectangles will show you the possible colors you can choose from. Select the color you want by clicking one of the colored rectangles.
  5. Click to close the Colors window.
  6. Close the about:preferences page. Any changes you've made will automatically be saved.

Firefox Font Fix

Custom Font Color

Some websites have custom font colors, to disable them:

  1. In the Menu bar at the top of the screen, click Firefox and select Preferences.Click the menu button and select ...
  2. In the General panel, go down to Language and Appearance.
  3. Under Fonts and Colors, click the button.
  4. In the window that opens, set Override the colors specified by the page with my selections above to Always.
  5. Click to close the Colors window.
  6. Close the about:preferences page. Any changes you've made will automatically be saved.

Other settings for Colors

Text and Background: Here you can change the default text and background color to be used on web pages that haven't specified that information. Click on the color samples to select colors.

  • Use system colors: Check this optionpreference to use the colors defined in your operating system settings instead of the colors specified above.

Link Colors: Here you can change the default colors for Web links. Click on the color samples to select colors.

  • Underline links: By default, links are underlined on web pages. Uncheck this optionpreference to disable this. Note that many sites specify their own styling rules and this optionpreference has no effect on those sites.
  • Override the colors specified by the page with your selections above:
    • Always: Select this optionpreference to force all sites to use your default colors.
    • Only with High Contrast themes: This optionpreference will make Firefox use the colors specified by the web page author, except when you are using a High Contrast WindowsLinux theme.
    • Never: Select this optionpreference to make Firefox use the colors specified by the web page author.
Whatfont Firefox

Firefox Default Font

Note: If you later want to restore the default colors:

Change Font Size Firefox Toolbar

  1. Type about:config in the address bar and press EnterReturn.
    A warning page may appear. Click to go to the about:config page.
  2. Enter browser*color in the Search field.
  3. Right-clickHold down the control key while you click on the modified preferences (displayed in bold font).
  4. Select Reset.
  1. Type about:config in the address bar and press EnterReturn.
    A warning page may appear. Click to go to the about:config page.
  2. Enter browser*color in the Search field.
  3. Click the Reset button next to the modified preferences (displayed in bold font).

Firefox Font Download

Firefox also includes a Zoom. This allows you to increase the size of text on any web page. For instructions, see Font size and zoom - increase the size of web pages.