Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
143 lines (128 sloc) 5.28 KB
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>How Filament Group Loads Web Fonts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
/*! - v0.1.0 - 2014-07-24
* Copyright (c) 2014 Filament Group *//*! EnhanceJS: a progressive enhancement boilerplate. Copyright 2014 @scottjehl, Filament Group, Inc. Licensed MIT */
(function( window, undefined ) {
// Enable JS strict mode
"use strict";
// Define some variables to be used throughout this file
var doc = window.document;
// loadCSS: load a CSS file asynchronously. Included from
function loadCSS( href, before, media ){
// Arguments explained:
// `href` is the URL for your CSS file.
// `before` optionally defines the element we'll use as a reference for injecting our <link>
// By default, `before` uses the first <script> element in the page.
// However, since the order in which stylesheets are referenced matters, you might need a more specific location in your document.
// If so, pass a different reference element to the `before` argument and it'll insert before that instead
// note: `insertBefore` is used instead of `appendChild`, for safety re:
var ss = window.document.createElement( "link" );
var ref = before || window.document.getElementsByTagName( "script" )[ 0 ];
var sheets = window.document.styleSheets;
ss.rel = "stylesheet";
ss.href = href;
// temporarily, set media to something non-matching to ensure it'll fetch without blocking render = "only x";
// inject link
ref.parentNode.insertBefore( ss, ref );
// This function sets the link's media back to `all` so that the stylesheet applies once it loads
// It is designed to poll until document.styleSheets includes the new sheet.
function toggleMedia(){
var defined;
for( var i = 0; i < sheets.length; i++ ){
if( sheets[ i ].href && sheets[ i ].href.indexOf( href ) > -1 ){
defined = true;
if( defined ){ = media || "all";
else {
setTimeout( toggleMedia );
return ss;
/* Enhancements for qualified browsers - “Cutting the Mustard”
Add your qualifications for major browser experience divisions here.
For example, you might choose to only enhance browsers that support document.querySelector (IE8+, etc).
Use case will vary.
if( !( "querySelector" in doc ) ){
// basic browsers: last stop here!
/* Load custom fonts
We prefer to load fonts asynchronously so that they do not block page rendering.
To do this, a meta tag with a name matching the fontsWoffKey should have a content attribute referencing the path to this fonts file.
NOTE: You may want to have logic here to choose between one of many font formats before loading it.
For example, we often load WOFF, WOFF2, or Truetype. If so, just define meta tags for each
var supportsWoff2 = (function( win ){
if( !( "FontFace" in win ) ) {
return false;
var f = new win.FontFace( "t", 'url( "data:application/font-woff2," ) format( "woff2" )', {} );
f.load().catch(function() {});
return f.status == 'loading';
})( window );
// load font (woff)
var ua = navigator.userAgent,
fontFileUrl = "fonts/data-woff.css";
if( supportsWoff2 ) {
fontFileUrl = "fonts/data-woff2.css";
// sometimes you have to do the bad thing. ¯\_(ツ)_/¯
// ttf if non-chrome android webkit browser
} else if( ua.indexOf( "Android" ) > -1 && ua.indexOf( "like Gecko" ) > -1 && ua.indexOf( "Chrome" ) === -1 ){
fontFileUrl = "fonts/data-ttf.css";
loadCSS( fontFileUrl );
}( this ));
<link rel="stylesheet" href="/demo-head/demohead.css">
body {
font-family: Source Sans Pro, sans-serif;
<div class="demo-header">
<div class="company">
<img src="">
<div class="details">
<h1 class="description-container">Demo of <span class="repo-name">Font Loading</span>
<span class="description">Progressively rendered font loading</span>
<ul class="outbound-links">
<li><a href="">Blog Post</a></li>
<li><a href="">Code</a></li>
<li><a href="">Issues</a></li>
<div class="nav-container">
<div class="docs-globalnav">
<nav class="docs-nav">
<a href="data-uris.html" class="current">Data URIs</a>
<a href="data-uris-cookie.html">Data URIs with Cookies</a>
<a href="font-events.html">Font Events <strong>*Recommended*</strong></a>
<div class="docs-main">
<h2>Font Loading using Data URIs</h2>
<p>Please see our updated post for font loading recommendations: <a href="">Font Loading Revisited with Font Events</a>.</p>
<p>This is sample text that should show while the remote web font is loading.</p>
<p>Continue reading prior article: <a href="">How we use web fonts responsibly, or, avoiding a @font-face-palm</a>.</p>