How to Detect When a Browser Is Using a Fallback Font Instead of the Primary One Specified in the CSS

Is it possible to detect when a browser is using a fallback font instead of the primary one specified in the CSS?

This sounds like a job for something like fontkit.js or opentype.js, or even Font.js, all of which can test fonts for glyph support. System fonts are not covered this way (Font.js might work, it'll probably report a width 0 for the tested glyph) but then these are typically the "web safe" fonts, of which we already know exactly which glyphs are supported because everyone uses the same ones. For testing "holes" in a custom font, though, any of the previously mentioned three should already do what you intended to implement.

why my fallback font-family css (arial) is being used instead of the primary

So, you have font-family: "helvetica neue ultralight", Arial, serif; and this allows the browser to use Arial if helvetica neue ultralight font is not found and if Arial is not found then serif is used.

Okay, if you use:

font-family: "helvetica neue ultralight", serif;

helvetica is used, why?

There's even serif font isn't available in the browser. So, all of them are not available in the browser, then you'll see helvetica is used as local machine font but not the font included in the browser.

To conclude, check for font existence, double check the path of the font you embed using @font-face.

How can I determine what font a browser is actually using to render some text?

The FontFinder plugin for Firefox does exactly what you want. After installing, highlight a block of text, right click and go to FontFinder -> Analyze Selection. It will tell you the actual font being used as well as a other information like font-family, spacing, color, etc.

Note that per Wilfred Hughes' answer, Firefox now supports this natively. This article has more details.

Is it necessary to provide a fallback font for a web font face?

I doubt you would have a problem with Google being unreachable. However some browsers do use the fallback font until the downloaded font is available.

From Google: https://developers.google.com/webfonts/faq

How is text displayed while the browser is still loading the font
file?

Browser behavior varies depending on the type of browser. Some will only display the text after the font file is loaded, others will
use the fallback font from the font stack and then refresh the page
when the font is available. The latter behavior is generally referred
to as the "flash of unstyled text." For browser details, see the
Technical Considerations page.

For greater control over how browsers behave while the font is still loading, use the WebFont Loader.

How do web browsers implement font fallback?

Font fallback in browsers (as opposed to, say, in an OS) is based on two things:

The CSS specification, which gives the fonts that are to be used for fallback, and
The text engine, which does text shaping.

The CSS spec is fairly trivial in this respect, simply giving the list of fonts using their system names, but several possible "catch all" fonts that are in no way guaranteed to be the same from computer to computer (there is no reason to assume that serif maps to Times or Times New Roman, for instance).

The fallback algorithm used by text engines is entirely up to the engine, but usually kicks in during the glyph lookup step: the text engine sees a string of code points, and tries to use a font to shape that string. For each point in the sequence, it checks whether the font has a matching glyph (by consulting the CMAP table and subtables), or a rule that tells the engine that there may be a glyph to use only if more code points follow, through the GSUB mechanism (For instance, a font without glyphs for the individual letters e, t and c, but with a glyph for & and a GSUB rule that says the sequence e+t+c should be in-text replaced with the single glyph &), and when it's finished accumulating this kind of "unit of points", it shapes the text and hands it back to whatever asked it to shape text.

If, during glyph lookup, it turns out the font doesn't contain anything that lets the engine shape a particular code point (i.e. running through the CMAP data as well as the GSUB rules still shows "there is no glyph") then the text engine can do two things:

Give up. There is no glyph, instead use the .notdef outline defined as glyph id 0, and generally give you text with lovely empty boxes (lovingly called "tofu" by font folks) or question marks.
Attempt font fallback, where it will try another font to find a glyph for the unsupported code point in.

When using fallback, an engine can go down a list of alternative fonts until either: (a) a glyph is found, or (b) the list is exhausted, at which point the engine has to give up, and will use the .notdef glyph. Whether the engine grabs the .notdef glyph from the original font, or from the last font in the list, is entirely up to the engine (although usually it'll go with the first font, for legibility)

There is no "standard" algorithm for this defined anywhere; font fallback is basically a convenience mechanism offered by text engine authors, like how browsers come with bookmark managers (handy, and not part of any spec). As far as OpenType is concerned, there are no requirements on whether an engine should just serve up .notdef when a glyph is not found, or whether it should serve up the part it could shape, then find the missing glyph somewhere else, and render text that way. CSS implies that your text engine should have at least some form of font fallback, but it doesn't specify how it should work, or when it should kick in.

CSS: Fallback fonts

you can specify multiple fonts:

p {
    font-family: "Times New Roman", Times, serif;
}

The browser will try the first one, if that one isn't available the second, and so forth. In the end it uses the family serif, so the browser chooses any serif font. You should use the monospace family.

So in your case, something like this is what you want:

p {
    font-family: "Lucida Console", "Courier New", monospace;
}

How to get the actual rendered font when it's not defined in CSS?

I suggest this function:

function css( element, property ) {
    return window.getComputedStyle( element, null ).getPropertyValue( property );
}

Usage:

css( object, 'font-size' ) // returns '16px' for instance

Note: getComputedStyle doesn't work in IE8.

Live demo: http://jsfiddle.net/4mxzE/

console.log(
  getComputedStyle(document.getElementById('test'), null)
    .getPropertyValue('font')
)

#test {
  font-family: fantasy, cursive;
}

<div id="test">Lorem ipsum dolor sit font-face</div>

Why does this Slow network detected... log appear in Chrome?

This means the network is slow, and Chrome is replacing a web font (loaded with a @font-face rule) with a local fallback.

By default, the text rendered with a web font is invisible until the font is downloaded (“flash of invisible text”). With this change, the user on a slow network could start reading right when the content is loaded instead of looking into the empty page for several seconds.

Related Chrome issue: https://bugs.chromium.org/p/chromium/issues/detail?id=578029. (A change enabling this behavior for 3G connections landed in September; this should be the reason you got the message.)
Related source code: https://chromium.googlesource.com/chromium/src/third_party/+/master/WebKit/Source/core/css/RemoteFontFaceSource.cpp#74

How to change the font-size and style of the fallback font

No approach that I know of that doesn't use modernizer. Stick it in the head of your html. Don't know how people can live without it. To keep it small, use a minimum copy of Modernizer with just the selection for @font-face. Also, if you are on an Apache server, GZIP your html, css, and js by adding a short bit of code to the .htaccess. This will speed you up a lot.

Then do the following:

.fontface h1
 {
  font-size:25px; 
  font-style:normal;
 }

OR leave the modern browser alone and just do:

.no-fontface h1
 {
  font-size:18px; 
  font-style:italic;  
 }

Modernizer