What font is that?

[dorayme]

Is there a simple way of finding out what font one is looking at
in a web page? Sometimes, of course, it is easy to look at source
and css, but other times it is a bother to get the right sheet...
And sometimes it is complicated by the recommended, generic, what
you have set on your machine etc. But some people will know what
I mean and have probably wondered the same thing.

 

[Jim Moe]

Is there a simple way of finding out what font one is looking at
in a web page? Sometimes, of course, it is easy to look at source
and css, but other times it is a bother to get the right sheet...

Looking at the style specification and knowing the browser's defaults is
the only way.
If you use Mozilla or Firefox there is an extension called WebDeveloper
<http://chrispederick.com/work/webdeveloper/>. One of its many useful
features is the ability to see the style for any selected element. (But
you still need to know the browser's font defaults.)

 

[Jonathan N. Little]

Is there a simple way of finding out what font one is looking at
in a web page? Sometimes, of course, it is easy to look at source
and css, but other times it is a bother to get the right sheet...
And sometimes it is complicated by the recommended, generic, what
you have set on your machine etc. But some people will know what
I mean and have probably wondered the same thing.

DOM inspector for Moz/FF look at 'Computed Style' for element

 

[Bob Long]

In

Is there a simple way of finding out what font one is looking at
in a web page? Sometimes, of course, it is easy to look at source
and css, but other times it is a bother to get the right sheet...
And sometimes it is complicated by the recommended, generic, what
you have set on your machine etc. But some people will know what
I mean and have probably wondered the same thing.

Not sure if it classifies as "simple", and I don't know how accurate it is:
http://www.myfonts.com/WhatTheFont/

 

[dorayme]

Looking at the style specification and knowing the browser's defaults is
the only way.
If you use Mozilla or Firefox there is an extension called WebDeveloper
<http://chrispederick.com/work/webdeveloper/>. One of its many useful
features is the ability to see the style for any selected element. (But
you still need to know the browser's font defaults.)

Look, thanks for this, Jim. Yes, this sounds like something I
should have. I seem unable to get it for my Mac from the link you
give. Let me go see....

So far, I have failed to load it, it seems a bit tricky - notices
about Firefox no allowing this to install for security etc etc...
and will need to do it when I am more patient. Anyone done this
on a Mac on OS X?

 

[dorayme]

DOM inspector for Moz/FF look at 'Computed Style' for element

OK I go to say http://sn2.com.au

And I open the DOM inspector from the Tools menu. And open an
arrow to down on a P and #text appears and what then?

 

[Jonathan N. Little]

OK I go to say http://sn2.com.au

And I open the DOM inspector from the Tools menu. And open an
arrow to down on a P and #text appears and what then?

The #text may be nothing but a carriage return or white-space, but in
your example the only P not in the "abused" table layout is the
'conditions of use | contacts' links at the bottom. When selected in the
left pane go to the right pane select 'Computed Style' from the type
drop-down to the left of where it says 'Object -DOM Node'. Scroll to
'Font-Family' and the cascade sets the element to
'Arial,Geneva,Helvetica,Verdana,sans-serif'

 

[Sally Thompson]

Look, thanks for this, Jim. Yes, this sounds like something I
should have. I seem unable to get it for my Mac from the link you
give. Let me go see....

So far, I have failed to load it, it seems a bit tricky - notices
about Firefox no allowing this to install for security etc etc...
and will need to do it when I am more patient. Anyone done this
on a Mac on OS X?

I loaded it fine on my Mac on OS X, but not through that link. AFAIR I just
went to the main Firefox page: <http://www.mozilla.com/firefox/> and
downloaded it from there. Do you have a firewall blocking it perhaps?

 

[Toby Inkster]

Is there a simple way of finding out what font one is looking at
in a web page?

ISTR that Opera for Linux/UNIX used to have a "font debug" mode. When this
option was enabled you could Ctrl+Click on any bit of text you liked and
the name of the exact font that had been used for that character would be
printed out on your terminal.

I doubt it's still in more recent versions though. Probably disappeared
when version 7 came out.

 

[dorayme]

In

Not sure if it classifies as "simple", and I don't know how accurate it is:
http://www.myfonts.com/WhatTheFont/

A most interesting site! I don't think it is quite good enough
(in its auto feature) for website font sniffing - probably
because of the low res compared to print mediums. I tried some of
the text on its own pages (which, btw, seems to be Verdana
looking at the css.)

Enlarged it in my browser and took a snap of just a few words (up
close... comman+shif+4 on a Mac), it could hardly recognise any
of the letters and I had to fill in the rest on its dialog box
from keyboard to help it (you need to try it to see what I mean).
Anyway the result was that it suggested Attac-Bold,
Attac-Semi-Bold, Congress Sans-Light, Corinthian Light and
Corinthian Light LET as matches!

 

[dorayme]

dorayme wrote:

The #text may be nothing but a carriage return or white-space, but in
your example the only P not in the "abused" table layout is the
'conditions of use | contacts' links at the bottom. When selected in the
left pane go to the right pane select 'Computed Style' from the type
drop-down to the left of where it says 'Object -DOM Node'. Scroll to
'Font-Family' and the cascade sets the element to
'Arial,Geneva,Helvetica,Verdana,sans-serif'

Right, yes, there it is... Thanks for this Jonathan. I might
sniff about this a bit more often now.

I could not get any 'Computed Style' option for text that was in
a P in the "abused" table. Why is this? Sometimes authors use
fonts I want to know about in "abused" table layouts...

 

[dorayme]

snip


I loaded it fine on my Mac on OS X, but not through that link. AFAIR I just
went to the main Firefox page: <http://www.mozilla.com/firefox/> and
downloaded it from there. Do you have a firewall blocking it perhaps?

I tried also from your link Sally, just now, and I got down a
..xpi file (as I did from Jim's link). Question is how to install
it? The one I got from your link (and going to extensions etc) is
a plain icon file called "web_developer-1.0.2-fx+fl.xpi" Curious
thing, it is sitting on my desktop all waiting to go somewhere,
maybe I will leave it there as an unopened chocolate for a while!

I am amazed at the number of developer tools there are. I am
thinking I might never make another website again if I get too
tempted by them, they would take up too much time!

I want this one though! As a matter of interest, iCab gets up the
css sheet if it is not happy with something in the css! This
might do me since it is mostly not perfectly happy with anything
(as it properly should not be... standards must be upheld, after
all, what...). It might be able to get it up even when happy but
I have not looked.

 

[dorayme]

ISTR that Opera for Linux/UNIX used to have a "font debug" mode. When this
option was enabled you could Ctrl+Click on any bit of text you liked and
the name of the exact font that had been used for that character would be
printed out on your terminal.

I doubt it's still in more recent versions though. Probably disappeared
when version 7 came out.

That would be very good indeed! Can't see it in my Opera (approx
or penultimately the latest)...

 

[Sally Thompson]

I tried also from your link Sally, just now, and I got down a
.xpi file (as I did from Jim's link). Question is how to install
it? The one I got from your link (and going to extensions etc) is
a plain icon file called "web_developer-1.0.2-fx+fl.xpi" Curious
thing, it is sitting on my desktop all waiting to go somewhere,
maybe I will leave it there as an unopened chocolate for a while!

To be honest I can't really remember how I got it, but (having used it on my
previous Windoze PC) it was one of the first things I put on my squeaky-new
Mac so I was by no means a Mac expert! I think having downloaded Firefox, I
probably did Tools - Extensions - Get Extensions, and it was all there when I
restarted Firefox. (You do have to quit Firefox properly and then restart it
AFAIR). Good luck.

 

[Beauregard T. Shagnasty]

I tried also from your link Sally, just now, and I got down a .xpi
file (as I did from Jim's link). Question is how to install it?

From Firefox menu:
File > Open File
In resulting dialog, point to the .xpi file
Click [ Open ]

 

[Jonathan N. Little]

dorayme wrote:

I could not get any 'Computed Style' option for text that was in
a P in the "abused" table. Why is this? Sometimes authors use
fonts I want to know about in "abused" table layouts...

The #test node could be a simple carriage return or whitespace in
markup and therefore have no CSS properties

CODE

<p>{carriage return}
{tab}<span>Some of your text...


DOM

P -+
+-#text <- Just the CR and TAB in markup but ignored in browser
|
+-SPAN <- Span node with nodeValue "Some of your text..."

¿comprende?

 

[Leonard Blaisdell]

I tried also from your link Sally, just now, and I got down a
.xpi file (as I did from Jim's link). Question is how to install
it?

Drag it on to the browser icon and see what happens ;-) It's a
legitimate Mozilla helper file extension, but I've never heard of it.
<http://filext.com/detaillist.php?extdetail=XPI>.

leo

 

[Leonard Blaisdell]

To be honest I can't really remember how I got it, but (having used it on my
previous Windoze PC) it was one of the first things I put on my squeaky-new
Mac so I was by no means a Mac expert! I think having downloaded Firefox, I
probably did Tools - Extensions - Get Extensions, and it was all there when I
restarted Firefox. (You do have to quit Firefox properly and then restart it
AFAIR). Good luck.

Probably a better idea than the one I gave her. I'm hoping that Camino
catches up with all the spiffy Moz extensions eventually. It is, after
all, a Moz product for the Mac.

leo

 

[dorayme]

I tried also from your link Sally, just now, and I got down a .xpi
file (as I did from Jim's link). Question is how to install it?

From Firefox menu:
File > Open File
In resulting dialog, point to the .xpi file
Click [ Open ]

Well! You could knock me down with a feather Beauregard, 3 secs
work and it is done. Thanks. May I offer you something? A little
tale perhaps... http://dorayme.150m.com/jokes/coupleGoingOut.html

 

[dorayme]

dorayme wrote:

The #test node could be a simple carriage return or whitespace in
markup and therefore have no CSS properties

CODE

<p>{carriage return}
{tab}<span>Some of your text...


DOM

P -+
+-#text <- Just the CR and TAB in markup but ignored in browser
|
+-SPAN <- Span node with nodeValue "Some of your text..."

¿comprende?

Well, do I? If the P is there, if the text is there, if it is
specified in the css at least to filter down to the P and the
page is reasonably valid, is there any way to use this fancy
doodle DOM inspector to track it down? Never mind tabs and
carriage returns Jonathan! Lets get down to business! You
cleverly tracked down something in the footnote ok! So why
exactly is it so hard to track down the rest?

I guess this speech shows absurd gaps in my understanding...

BTW, pennies might drop eventually for me if you say nothing
more, so don't feel obliged.