Permalink
Branch: master
Find file Copy path
bae35ab Nov 30, 2018
1 contributor

Users who have contributed to this file

184 lines (168 sloc) 6.6 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How Filament Group Loads Web Fonts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
/*! FilamentGroup.com - v0.1.0 - 2014-07-24
* http://filamentgroup.com/
* 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 https://github.com/filamentgroup/loadCSS/
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: http://www.paulirish.com/2011/surefire-dom-element-insertion/
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
ss.media = "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 ){
ss.media = media || "all";
}
else {
setTimeout( toggleMedia );
}
}
toggleMedia();
return ss;
}
// cookie function from https://github.com/filamentgroup/cookie/
function cookie( name, value, days ){
// if value is undefined, get the cookie value
if( value === undefined ){
var cookiestring = "; " + window.document.cookie;
var cookies = cookiestring.split( "; " + name + "=" );
if ( cookies.length === 2 ){
return cookies.pop().split( ";" ).shift();
}
return null;
}
else {
var expires;
// if value is a false boolean, we'll treat that as a delete
if( value === false ){
days = -1;
}
if ( days ) {
var date = new Date();
date.setTime( date.getTime() + ( days * 24 * 60 * 60 * 1000 ) );
expires = "; expires="+date.toGMTString();
}
else {
expires = "";
}
window.document.cookie = name + "=" + value + expires + "; path=/";
}
}
/* 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!
return;
}
/* 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;
}
// an empty woff2 with no glyphs
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";
}
if( fontFileUrl && !cookie( "fonts" ) ){
loadCSS( fontFileUrl );
// set cookie to mark this file fetched
cookie( "fonts", fontFileUrl, 7 );
}
}( this ));
</script>
<link rel="stylesheet" href="/demo-head/demohead.css">
<style>
body {
font-family: Source Sans Pro, sans-serif;
}
</style>
<!--#if expr="$HTTP_COOKIE=/fonts\=fonts\/data-woff.css/" -->
<link rel="stylesheet" href="fonts/data-woff.css">
<!--#elif expr="$HTTP_COOKIE=/fonts\=fonts\/data-ttf.css/" -->
<link rel="stylesheet" href="fonts/data-ttf.css">
<!--#elif expr="$HTTP_COOKIE=/fonts\=fonts\/data-woff2.css/" -->
<link rel="stylesheet" href="fonts/data-woff2.css">
<!--#endif -->
</head>
<body>
<div class="demo-header">
<div class="company">
<img src="https://filamentgroup.com/images/fg-logo-positive-sm-crop.png">
</div>
<div class="details">
<h1 class="description-container">Demo of <span class="repo-name">Font Loading</span>
<span class="description">Progressively rendered font loading</span>
</h1>
<ul class="outbound-links">
<li><a href="https://www.filamentgroup.com/lab/font-loading.html">Blog Post</a></li>
<li><a href="https://github.com/filamentgroup/font-loading">Code</a></li>
<li><a href="https://github.com/filamentgroup/font-loading/issues">Issues</a></li>
</ul>
</div>
</div>
<div class="nav-container">
<div class="docs-globalnav">
<nav class="docs-nav">
<a href="data-uris.html">Data URIs</a>
<a href="data-uris-cookie.html" class="current">Data URIs with Cookies</a>
<a href="font-events.html">Font Events <strong>*Recommended*</strong></a>
</nav>
</div>
</div>
<div class="docs-main">
<h2>Font Loading using Data URIs with Cookies</h2>
<p>Please see our updated post for font loading recommendations: <a href="https://www.filamentgroup.com/lab/font-events.html">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="https://www.filamentgroup.com/lab/font-loading.html">How we use web fonts responsibly, or, avoiding a @font-face-palm</a>.</p>
</div>
</body>
</html>