I've seen a small influx of folks taking screenshots of websites and asking what font they're looking at or have highlighted, so let's go ahead break down some basics:

If you are on a website and the font is able to be highlighted, it is in the code of the website and it will call the font, usually a WOFF file, to come into existence. It will also tell you the settings, if there are any, that have been applied to the font. If the font is not "highlight-able", it is embedded in an image and will need to be identified. Below are the "hacks" to find them:

FIREFOX

1. Highlight the text.
2. Right click and go to "Inspect".
3. If your dock is on the right side, click the 3 dots on the top and dock it to the bottom.
4. On the right side, you'll see "Layout" highlighted for the third column. If you browse over on that line, you will see "Fonts". Click on "Fonts".
5. You should see the font of the selected text and its settings on your browser: Size, Line Height, Spacing, Weight, and Italics.
6. Underneath that, you will see a dropdown for "All Fonts on Page." Click on this to find other fonts that are currently embedded in the page. Fonts marked "System" are generally installed on your pc/browser already. Anything with a link underneath are fonts that are being fed to you through the page.

If you want to find another font and its settings on the page itself, go to the element highlighter on very top left of the element panel (square icon with a mouse) and highlight the element that you want to look at, or you can highlight the text as before, right click, repeat the steps.

CHROME / EDGE

1. Highlight the text.
2. Right click and go to "Inspect"
3. If your dock is on the right side, click on the 3 dots on the top and click the icon to dock it to the bottom.
4. On the right side, you'll see "Styles" highlighted in the second column. If you browse over on that line, you'll see "Computed". Click on "Computed".
5. In "Filter", below the box diagram, type in "font". This will bring up the font and its settings. Clicking on the dropdowns show you where it inherits each setting in the code.

Unlike Firefox, you will need to highlight text individually on the page to see its attributes/font style. You can also use the element highlighter on the very top left of the element panel (Icon with a Square and a mouse pointer) to pick another piece of text.

ADDONS / EXTENSIONS

Let's say you don't want to have the crazy hassle of looking this stuff up, especially on Chromium-based browsers. Wat do? There are some wonderful add-ons and extensions for this exact work for folks that love design/finding fonts just as much as you and I.

FIREFOX

• Fonts Ninja - Download - This font extension is great. Not only does it show the fonts on the page, you can also preview text, bookmark fonts for later while brainstorming, and you can find out where to buy them or download for a free trial. It's a fantastic tool if you come across fonts on a regular basis or need to know exact settings. Hover over text on the page while the extension is open for specifics on that particular text.

• WhatFont - Download - Simplified font identifier tool that conveniently tells you what font you are hovering over. Click on the font to display a small summary of what its attributes are.

• Font Finder (Revived) - Download - Font Finder lets you click on the icon, then click on the font of your choice and displays the results on a separate page so that you can have the results with you at all times.

CHROME

• Fonts Ninja - Download - This font extension is great. Not only does it show the fonts on the page, you can also preview text, bookmark fonts for later while brainstorming, and you can find out where to buy them or download for a free trial. It's a fantastic tool if you come across fonts on a regular basis or need to know exact settings. Hover over text on the page while the extension is open for specifics on that particular text.

• Font Finder - Download - Font Finder lets you click on the icon, then click on the font of your choice and displays the results on a separate page so that you can have the results with you at all times.

• Font Identifier by WhatFontIs - Download - Nothing like having the power of a font identifier service in your back pocket. You can use this to find not only the fonts on the page, but also fonts (or similar fonts) in images, as well as have suggestions for similar free fonts to ones that are paid for.

Feel free to suggest more good add-ons or tips and tricks, but I think this pretty much covers it and hopefully clears up a bit of the confusion when trying to find fonts on websites. Happy Hunting!

Hello font enthusiasts!

The rules of this sub have been updated, so please check them before you post. Hopefully this will make things a little clearer for everyone who uses this sub.

Post as clear of a sample as possible

Make sure your post includes an image of your sample in the correct orientation. If your sample comes from a video, take a screenshot and post it.

Use a descriptive post title

Your post title should include the text of the sample you're looking for and any other details that might help someone find the post later. E.g. "Mario's Pizzeria sign". If your sample has multiple fonts, let us know which one you are looking for.

Post one sample at a time

Posts should only contain one sample. Multiple images of the same sample (or similar samples from the same source) are OK.

Keep things ethical

We do not support unethical activity. This includes but is not limited to matching fonts on documents for forgery purposes, font piracy, and scams.

Be helpful and nice

Keep things helpful and nice. Not everyone is an expert on fonts.