Google Web Font Loader is a javascript library for web developers that enables more control over font loading with linked fonts via @font-face than is provided in the Google Fonts API. The library is hosted by Google and loads fonts asynchronously (AJAX), preventing a block in page load while waiting for javascript to load. The configuration is defined by a global variable and provides various javascript events with call back functions and also CSS events. A customizable module is available that can call non-standard font weights and character subsets.
This page is a brief study of how to code a web page to use the font loader and includes type specimens for Acumin Pro, a sans-serif, verstile face for long form and titling, from Adobe Originals; and Cinzel, a serif, titling face, from Google Fonts. While specialty type fonts are not always neccessary, most communications are more effective when text is styled other than with system or web standard fonts. FOUT (Flashing of Unstyled Text), can occur when a system font instantly replaces the specified font, or fonts, while the resources are loading; then the system font is replaced with the correct font which can cause a flashing effect, unless the system font is adjusted to display with similar spacing and line heights. However, using asychnronous loading of font resources can speed up performance of a web page leaving FOUT as a minor point in favor of efficiency and user experience when “real” fonts are specified. No adjustments to the native font were made so FLOUT, if any, could be visible for this study.
Note: The font resources required for this page are more than would likely be used for most pages. This is so that multiple weights, roman and italics and ligatures could be displayed.
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
( . , ‘ ’ – — ; : # % * ¢ § • ‰ ‱ ※ ‡ † )
0123456789 ¿ ? ¡ ! & @ ‘ ’ “ ” « » % * ^ # $ £ € ¢ / ( ) [ ] { } . , ® © ff ffi
Thin roman, font-weight 100: The quick brown fox jumps over the lazy dog.
Extra Light roman, font-weight 200: Is not the best kind of originality that which comes after a sound apprenticeship? That which shall prove to be the blending of a firm conception of, “useful precedent”…
Light roman, font-weight 300: Is not the best kind of originality that which comes after a sound apprenticeship? That which shall prove to be the blending of a firm conception of, “useful precedent”…
Medium italic, font-weight 500: Is not the best kind of originality that which comes after a sound apprenticeship? That which shall prove to be the blending of a firm conception of, “useful precedent”…
Semibold roman, font-weight 600: Is not the best kind of originality that which comes after a sound apprenticeship? That which shall prove to be the blending of a firm conception of, “useful precedent”…
Black roman, font-weight 800: Is not the best kind of originality that which comes after a sound apprenticeship? That which shall prove to be the blending of a firm conception of, “useful precedent”…
( . , ‘ ’ – — ; : # % * ¢ § • ‰ ‱ ※ ‡ † )
0123456789 ¿ ? ¡ ! @ ‘ ’ “ ” « » % * ^ # $ £ € ¢ / ( ) [ ] { } . , ® © fi ffl ¼ ¾
The quick brown fox jumps over the lazy dog.