Chrome plugins to get fonts from webpage without using devtools
Imagine a warm Friday afternoon, you are looking to get inspired for your next important project.
You have nailed most of it — illustration, brand colors and now looking for a good font to match with rest of the the page style.
You suddenly remember your favorite website that you came across last week and you land to the page quickly via bookmark.
This was easy!!
Tougher part is to get actual applied font in the webpage. When you open native devtools available in chrome to “get inspiration”, you may see more than one font applied in the style.
Guess, which font is used in this medium article page?
But don’t worry- there are plugins available which can extract the rendered font from the stylesheet.
One of my personal favorite is Visual Inspector (Completely unbiased, I swear.)
But there’s more. Let’s have a look:
What font
Identify fonts on web pages
Donwload here — https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en
Google Font previewer
Lets you choose a font from the Google Font directory with a few text styling options, and preview them on the current tab.
Donwload here — https://chrome.google.com/webstore/detail/google-font-previewer-for/engndlnldodigdjamndkplafgmkkencc
Fontface Ninja
Explore fonts within a website, try, bookmark and buy them !
Donwload here — https://chrome.google.com/webstore/detail/fontface-ninja/eljapbgkmlngdpckoiiibecpemleclhh
Type wonder
This extension helps you to test web fonts on active chrome tab via typewonder.com
Downlaod here- https://chrome.google.com/webstore/detail/typewonder/ohgmapelghofmbacalgamfbejaghdilh
Font swap
Instantly swap the fonts on any web page to a Google Font
Download here — https://chrome.google.com/webstore/detail/font-swap-for-google-font/onhgmcpflfncjkdbclmhnfondmindgbg
[NEW] Visual Inspector — Fonts
Check and experiment with fonts in live website
Download here — https://chrome.google.com/webstore/detail/visual-inspector-by-canva/efaejpgmekdkcngpbghnpcmbpbngoclc?hl=en
Summing up
Like I say, picking the right design tool is lot like picking up a girl-friend. For some it’s love at first sight and some wants to take their time.
If I could recommend, I’d suggest you try a few of them until you call one of them your own.
However, with Visual inspector, you not only inspect but also try new font styles, alignments in a very familiar fashion.
I’d love it if you do try and let us know how did you like in the comments.
If this article saved your time from digging in codes, won’t you like to share it with your friends too.
