What font is a page using? Any easy way to find out?

[Mike Barnard]

I am busy for a sunday afternoon, aren't I?

When I look at a webpage, if I want to know what font is being used on
the screen, is there a way to find out? Is the info held in a hidden
variable somewhere for example?

I know I can look into the code and or css and see the fonts
specified, but unless you happen to know exactly which font looks like
which how do you identify the on screen one?

Google? Really? Ok...

 

[Jonathan N. Little]

I am busy for a sunday afternoon, aren't I?

When I look at a webpage, if I want to know what font is being used on
the screen, is there a way to find out? Is the info held in a hidden
variable somewhere for example?

I know I can look into the code and or css and see the fonts
specified, but unless you happen to know exactly which font looks like
which how do you identify the on screen one?

Google? Really? Ok...

Firefox [Web Developer Bar|Firebug|DOM Inspector] for selected element
look at computed style, see the font list and note the first on to match
what you have on your system...

 

[dorayme]

I am busy for a sunday afternoon, aren't I?

When I look at a webpage, if I want to know what font is being used on
the screen, is there a way to find out? Is the info held in a hidden
variable somewhere for example?

I know I can look into the code and or css and see the fonts
specified, but unless you happen to know exactly which font looks like
which how do you identify the on screen one?

Google? Really? Ok...

Firefox [Web Developer Bar|Firebug|DOM Inspector] for selected element
look at computed style, see the font list and note the first on to match
what you have on your system...

For example, you open the website in FF, you have the Developer
installed. Choose Outline from one of the developer menus. It will tell
you in a little text string above the website where that item is, it may
be in body > #wrapper > #leftcol > #nav > ul > li so you would look to
see if there any font-family instructions in some of these ids or lis,
if not, where is it getting its font? Look at body maybe. Like that.

 

[Jonathan N. Little]

For example, you open the website in FF, you have the Developer
installed. Choose Outline from one of the developer menus. It will tell
you in a little text string above the website where that item is, it may
be in body > #wrapper > #leftcol > #nav > ul > li so you would look to
see if there any font-family instructions in some of these ids or lis,
if not, where is it getting its font? Look at body maybe. Like that.

The problem is with some folks stylesheets it is not always obvious this
what one element's style may be, with specificity and conflicting, or
just poorly composed rules. What you what is the computed style, what
you wind up with in the end. Better to trace the element in the DOM
inspector

body
+div
+div
+ul
+li
and view the computed style pane, the result can sometimes be surprising.

 

[dorayme]

The problem is with some folks stylesheets it is not always obvious this
what one element's style may be, with specificity and conflicting, or
just poorly composed rules. What you what is the computed style, what
you wind up with in the end. Better to trace the element in the DOM
inspector

You are right.

 

[Toby A Inkster]

Firefox [Web Developer Bar|Firebug|DOM Inspector] for selected element
look at computed style, see the font list and note the first on to match
what you have on your system...

That won't tell you what font is *actually* being used though. Just the
computed CSS style. You then *assume* that the first font on the computed
CSS style that you have installed is being *used*, but that's not always
the case.

For example, given:

h1 {
font-style: italic;
font-family: "Impact", sans-serif;
}

If you have Impact installed, you might assume that Impact is what is
being shown on screen. However, you might not have the italic variant of
Impact, so your browser may actually be using a different font. Or perhaps
the heading includes some foreign characters, which Impact does not
include, so a different font is being used for some particular characters.

As far as I know, the only browser that will tell you what font it is
really using, right down to the individual character level is Opera. The
following advice applies to Opera for Linux, but I imagine similar
facilities are available for other Opera platforms:

1. In a terminal window, start Opera using:
opera -debugfont
2. Go to the page about which you are curious;
3. Highlight some text, or hover over a link;
4. Watch the terminal to see Opera report what font it
is using for that text.

--
Toby A Inkster BSc (Hons) ARCS
[Geek of HTML/SQL/Perl/PHP/Python/Apache/Linux]
[OS: Linux 2.6.17.14-mm-desktop-9mdvsmp, up 20:54.]

Best... News... Story... Ever!
http://tobyinkster.co.uk/blog/2008/03/23/hypnotist/