How To Find The Fonts Used, Size And Color On Any Website

Most of us browse internet on everyday basis and sometimes we come through few beautiful fonts used in different websites. Some of them are so nice that we want to use them in our websites, blogs or somewhere else. But we stuck most of the times because we don’t know what’s the name and size of the font.

Some of us look into the Sourcecode of that particular webpage to find the font which we liked. This technique  might be simple for developers and designers but surely not the easy way for those who are not familiar with the CSS codes and all.

So there are 2 Add-ons for Firefox to find the fonts, font color and font size very easily used in any webpage you are browsing. Let’s see them one by one in detail:

1) Font Finder : It is a Firefox Add-on which will help you to find the font used in a particular website by selecting some portion of the text you need to know and right clicking on it will show you the font used. The key features of Font Finder are :

  • Any font on a page can be completely analyzed
  • Any piece of an element’s information can be copied to the clipboard
  • Font-families can be disabled from the entire page, to test degradation for cross-OS support
  • Any active element can have any piece of the font’s options (such as color, size or family) adjusted inline

When you select the text, right click on it and you will find “Font Finder” option in the context menu. Just click it and you will get all the information regarding the selection text. Now you can use this information to download the font and use it anywhere.

2) Context Font : This is another extension to find the font and its size right inside the Firefox context menu. After installing it, select some sample text and right click on it, the Add-on will show the font used and its size easily.

The Context Font will not show the font color as the above add-on. It displays the size (px), font-family, font-style, font-weight, and font-variant of selected text in the contextual menu.

It also displays the downloadable font files for the font if specified by a @font-face rule.

I believe that Font Finder and Context Font are probably the simplest way to find the fonts used and its properties on any website.

I hope these add-ons will be useful for you and now finding the fonts used in any webpage will not be difficult for you.

About Yogesh Mankani

is a Advertising Professional and running his own Advertising agency in Jaipur. Aside from his work, his other passion is blogging/writing. You can find him on Twitter & can connect with him on Facebook.
This entry was posted in Internet Tips and tagged , , . Bookmark the permalink.
You might want to subscribe to the RSS feed for updates. If you wish to subscribe here via Email, then kindly click here.

Connect with SD on FACEBOOK easily

23 Responses to How To Find The Fonts Used, Size And Color On Any Website

  1. Pingback: uberVU - social comments

  2. Suhasini says:

    Nice article Yogesh and it is going to help developers and designers. Good research and article, thanks for sharing.

  3. Pingback: How To Find The Fonts Used, Size And Color On Any Website « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit

  4. Pingback: === popurls.com === popular today

  5. Pingback: Tweets that mention How To Find The Fonts Used, Size And Color On Any Website -- Topsy.com

  6. Miraculous! This was exactly what I needed today :-)
    .-= Amrit Hallan´s last blog ..amrithallan: @tankianann Hey, how are you doing? :-) =-.

  7. kn33ch41 says:

    Or you can use the Firebug plugin.

  8. Kevin M. says:

    I will have to check these out! I am always looking for good fonts.
    .-= Kevin M.´s last blog ..Do You Share God’s Heart? =-.

  9. SEO Leeds says:

    looks like a really neat tool, i would normally use firebug but this could be a easy to use alternative
    .-= SEO Leeds´s last blog ..SEO Yorkshire =-.

  10. Nice firefox addons..

    i have to check it out
    .-= Tricks tips´s last blog ..TeraCopy – Copy all Files at Lightning Speed =-.

  11. Pingback: Resources - Tweets of the Week (3.22.10 - 3.26.10) | Think Design

  12. Thanks, these addons will come in handy one day. Any addons you can recommend that works like ColorZilla? When I upgraded Firefox, this addon does not work anymore.

  13. Juegos says:

    I use FontFinder, is doing really good for me, I recommend it.
    .-= Juegos´s last blog ..Pirate Gems =-.

  14. Pingback: Vota Articolo

  15. Pingback: Vota Articolo

  16. Pingback: Vota Articolo

  17. Pingback: Vota Articolo

  18. Thanks for the great post. I always try to save concrete or construction related posts like this one.

  19. Pingback: Da: vajnar Cornell

  20. syndy says:

    That’s Excellent. These firefox add ons are amazing. Your really shared such a cool information. Thanks

  21. Excellent post indeed. You write in easy manner which is easy to comprehend even for newbie like me. Keep the good work going by continue making new posts. I have already subscribed to the RSS feed of your weblog and look forward to reading more posts in the future.

  22. Val Dylla says:

    Excelente información. Gracias!

  23. Shilpi Gemawat says:

    Nice article….very useful!!!

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge

Subscribe without commenting