Main Tests

Sanity Check

Uses normal font-loading capabilities. onfontready is not used. Susceptible to FOIT.

Font: 'f1'

Expected Results: Custom font should display

Result Notes: Pending...

Normal Usage

Font: 'f2'

Options: {}

Expected Results: Custom font should display

Result Notes: Pending...

Known Font

Font: 'Arial'

Options: {}

Expected Results: Arial font should display

Result Notes: Pending...

Generic Font-Family

Generic font families can be specified in a font stack, but only without quotes. Specifying { generic: true } causes onfontready to add the tested font without quotes in the CSS. Without this change, the generic font names are assumed to be the names of font faces that are loaded by the page.

Font: sans-serif (generic)

Options: { generic: true }

Expected Results: Generic font-family sans-serif should display

Result Notes: Pending...

Generic Font-Family without Generic Option

Generic font families cannot be detected properly if the generic option evaluates to false.

Font: cursive (generic)

Options: { generic: false }

Incorrect Usage: Always set the generic option to true when testing generic font families.

IE6 Failure: Generic font-family cursive should display because IE6 accepts generic font family names with quotes.

IE7 Failure: Generic font-family cursive should display because IE7 accepts generic font family names with quotes.

Expected Results: Fallback font (serif) should display, detection elements remain forever

Result Notes: Pending...

Using timeoutAfter and onTimeout

Font: 'f3'

Options: { timeoutAfter: 1, onTimeout: function() { ... } }

Expected Results: Fallback font (serif) should display

Result Notes: Pending...

Zero timeoutAfter

Since zero is falsy in JavaScript, using a 0 timeoutAfter will effectively tell onfontready not to use a timeout at all.

Font: 'f4'

Options: { timeoutAfter: 0, onTimeout: function() { ... } }

Incorrect Usage: A 0 timeoutAfter is pointless. Use a negative timeoutAfter to do an 'immediate-ish' timeout.

Expected Results: Custom font should display

Result Notes: Pending...

Negative timeoutAfter

Since zero is falsy in JavaScript, negative timeoutAfter values can be used for an 'immediate-ish' timeout.

Font: 'f9'

Options: { timeoutAfter: -1, onTimeout: function() { ... } }

Expected Results: Fallback font (serif) should display

Result Notes: Pending...

Missing onTimeout

Font: 'f5'

Options: { timeoutAfter: 1 }

Incorrect Usage: Always use onTimeout option if timeoutAfter option is used.

Expected Results: Fallback font (serif) should display

Result Notes: Pending...

Missing timeoutAfter

Font: 'f8'

Options: { onTimeout: function() { ... } }

Incorrect Usage: Always use timeoutAfter option if onTimeout option is used.

Expected Results: Custom font should display

Result Notes: Pending...

Using sampleText

Font: 'f6'

Options: { sampleText: 'Hello World, onfontready' }

Expected Results: Custom font should display

Result Notes: Pending...

Using sampleText with Limited Font

Font 'f_Fo' only contains uppercase 'F' and lowercase 'o' glyphs. Since the sampleText only contains those characters, onfontready can detect that the custom font has been loaded.

Font: 'f_Fo'

Options: { sampleText: 'oF' }

IE6 Failure: Block glyphs should display for the 'n' and 't' in 'Font' because IE6 replaces missing glyphs in custom fonts with equal-sized blocks, creating a potential false-positive condition.

Expected Results: Custom font should display only for 'F' and 'o' in 'Font'

Result Notes: Pending...

Fully Unsupported Glyphs in sampleText False Negative

Font 'f_Yu' only contains uppercase 'Y' and lowercase 'u' glyphs. Since the sampleText doesn't contain those characters, onfontready cannot detect that the custom font has been loaded.

Font: 'f_Yu'

Options: { sampleText: 'Hello World' }

Incorrect Usage: If sampleText must be used, only use it with characters supported by the custom font being tested.

IE6 Failure: Block glyphs should display because IE6 replaces missing glyphs in custom fonts with equal-sized blocks, creating a potential false-positive condition.

IE7 Failure: IE7 replaces missing glyphs in custom fonts with serif font glyphs, regardless of fallback font, creating a potential false-positive condition.

Expected Results: Fallback font (serif) should display, detection elements remain forever

Result Notes: Pending...

Partially Supported Glyphs in sampleText False Negative

Font 'f7' does not contain glyphs for uppercase 'Y', lowercase 'r', and lowercase 'u'. However it does contain the other glyphs in the sampleText. The unsupported glyphs will lead to differing widths in the sampleText, even after the custom font has loaded. onfontready cannot detect that the custom font has been loaded.

Font: 'f7'

Options: { sampleText: 'Your Font' }

Incorrect Usage: If sampleText must be used, only use it with characters supported by the custom font being tested.

IE6 Failure: IE6 replaces missing glyphs in custom fonts with equal-sized blocks, creating a potential false-positive condition.

IE7 Failure: IE7 replaces missing glyphs in custom fonts with serif font glyphs, regardless of fallback font, creating a potential false-positive condition.

Expected Results: Fallback font (serif) should display, detection elements remain forever

Result Notes: Pending...

sampleText with Character Width Equivalence False Positive

Many characters in Unicode can and do have the same width regardless of the font used. For example, consider the line-feed character is always zero-width. Many mathematical symbols and higher-level Unicode characters also have this same-width property, even if they visually appear different, in serif and monospace fonts. Since onfontready relies on differing widths of characters in different fonts, using such a width-equivalent character as the sampleText will cause onReady to be called immediately, even if the custom font isn't fully loaded. The custom font may load, but the false positive generated may allow the page to generate FOIT text.

Font: 'f10'

Options: { sampleText: String.fromCharCode(0) }

Incorrect Usage: If sampleText must be used, only use it with characters known to have different widths in serif and monospace.

Expected Results: Fallback font (serif) should display

Result Notes: Pending...

Using sampleText with Font Containing No Space Character

Font 'f_F1' contains only a single glyph for the capital 'F'. There is no space character specified at all. Since this font does not contain a space character, sampleText must be used.

Font: 'f_F1'

Options: { sampleText: 'F' }

IE6 Failure: IE6 replaces missing glyphs in custom fonts with equal-sized blocks, resulting in block glyphs for 'ont' in 'Font'.

Expected Results: Custom font should display only for 'F' in 'Font'

Result Notes: Pending...

Not Using sampleText with Font Containing No Space Character

Font 'f_F2' contains only a single glyph for the capital 'F'. There is no space character specified at all. Since no sampleText is specified, onfontready will attempt to use a space for the sampleText. This will result in a false-negative.

Font: 'f_F2'

Options: {}

Incorrect Usage: If custom font does not contain a space character, the sampleText option must be used. Furthermore, the sampleText must only contain glyphs the custom font defines.

IE6 Failure: IE6 replaces missing glyphs in custom fonts with equal-sized blocks, creating a potential false-positive condition.

IE7 Failure: IE7 replaces missing glyphs in custom fonts with serif font glyphs, regardless of fallback font, creating a potential false-positive condition.

Expected Results: Fallback font (serif) should display, detection elements remain forever

Result Notes: Pending...