#Font picker from website code

Open up the details sidebar if it’s closed and select the Styles – Computed option. Now right click the text, select Inspect Element. If you are using Safari, make sure the Developer menu is visible by checking the box at the bottom of the Advanced tab of Safari preferences. Their inspector pops up, now head to the convenient Fonts tab for the info you need.

If you are using Firefox, right click the text, select Inspect Element. DevTools pops up, make sure you are on the Styles tab and head to the Font-Family attributes to learn more about the fonts.

If you are using Google Chrome, right click on the mystery text, select Inspect.

#Font picker from website code

So if you’re trying to avoid installing dozens of browser extensions, we can find more about the fonts used through a good old code inspection: You are now presented with the font families used with an additional breakdown of all the typography within the webpage. You simply click the Visual Inspector icon in the Chrome menu to activate the tool, then head over to the Typography section in the dropdown. Visual Inspector Chrome Extension offers a bit more depth than the above two. Now you can select multiple parts of text allowing a better visualization of the font breakdown vs Fontanello. To activate the tool you must click the What Font icon in the browser menu. WhatFont Chrome and Safari Extension is my favorite option when it comes to font discovery. You simply right click on the text, find Fontanello in the menu and pow there is the font family and some additional attributes. Fontanello Chrome and Firefox Extension, in my opinion, is the quickest way to find out what font a webpage is using.