Easy way to determine Font?

HTML & CSS
1

Is there an easy way to determine what Fonts a website is using?

And, “Go look at the webpage’s HTML or Style Sheet” is not the response I’m seeking, because most major website (e.g. NY Times, Fortune, Wall Street Journal, etc) have their Fonts, Style Sheets and JavaScript so deeply buried that’s you’d need a Ph.D. in Archeology to find them?! :rolleyes:

I was sorta hoping there was some website/tool out there where you could just enter the URL and it would tell you what all of the fonts are - assuming that they are text and not images.

Somewhat based on earlier threads dealing with “pretty fonts”, I’d like to learn what fonts are used by the top websites and try to grow beyond Arial 12pt as a solution to my web-design! :wink:

Thanks,

Debbie

2

No, just busy sorting through all of you silly boys’ arguments in MY thread! :stuck_out_tongue:

I am on a MacBook, using FireFox 3.5.11 and I have FF Web Developer - which I have never really used - and don’t have Firebug (until someone answers my questions).

As mentioned, I don’t have any website in mind just yet, but want to be prepared as I do my “homework” on the Internet.

Something like: “I, Debbie, mostly use IE8. So, I would like to know an easy way to find out in IE8 what font are they using on http://www.ftv.com/fashion/page.php?P=4032 for the left side vertical menu, the one with I LOVE FASHION link”.

Smarty pants! :stuck_out_tongue:

Nah… I’m not into all that fruffy girly stuff, thank you very much!

I provided you a link in one of my responses.

Debbie

3

Using Firefox’s firebug addon, select whichever element you like, and see the font property or the inherited value. For example,

body {
    background-color: #FFFFFF;
    color: #333333;
    font-family: georgia,"times new roman",times,serif;
    font-size: 62.5%;
    line-height: 1.5em;
    margin: 0;
    padding: 13px 0;
}

Checking an h2 element shows the font is inherited from body. Since I have georgia on this machine, that’s what I see.

cheers,

gary

4

in FF if I right-click a page element and then select “inspect element” it shows the code and styles for that element.

5

I thought I installed that way back.

See the attached screen-shot to see what I have…

Debbie

6

When I right-click I don’t see that option.

See the attached screen-shot to see what I have…

Debbie

7

I’m pretty sure you’ll need firebug installed.

I’m using FF3.6.12

Click the Tools menu and about 1/2 way down the dropdown menu that appears you should see an option named Firebug.

If you don’t see it you can go to the the firebug website and download it.

http://getfirebug.com/

8

I have FF 3.5.11

Is that version okay?

Click the Tools menu and about 1/2 way down the dropdown menu that appears you should see an option named Firebug.

If you don’t see it you can go to the the firebug website and download it.

http://getfirebug.com/

I thought “Web Developer” was the same as “Firebug”?

Is that not so? :-/

Debbie

9

I think Firebug supercedes Web Developer but I’m not sure as I don’t use Firefox as my default development browser.

10

No, they are two different things. Firebug is my life support system. (Remove it and I die instantly! :lol: )

11

Web developer and Firebug fulfill different functions. Install Firebug here.

cheers,

gary

12

Different functions, but both are essential tools in any developer’s toolkit.

13

Yes, you can determine font attributes of site using CTRL+U and find css code of font. You can get whole thing that in which text which font style is used.

14

handy tools yes, but “essential” I’m not so sure :scratch:

what “must do’s” or “must have’s” do they have that no other software has?

15

Hmmmmm…

Live page edit?! :wink:
Element’s CSS rules inheritance?! :wink:
Box model view?! :wink:

Though I’m not so sure what you’re referring at with “no other software” ?

16

I was just saying I think they are “handy” tools but not “essential” tools because their features are also available in other web site development tools/software.

17

They are essential. Those “other web site development tools/software” you talk about are handy. Firebug IT IS essential. And if more would understand that, we would have far less dumb questions on these forums :slight_smile:

18

Ok but I don’t use Firebug or Web Developer and I use IE8 as my default development browser and I don’t have any problems.

So what “must have” or “must do” features do those 2 tools have that I am missing out on?

19

?

All this (and more) while working in the actual browser!!! I have to say a MUST. :slight_smile:

For me.

20

but I’m not missing out on those at all.

those features are not exclusive to those tools.