Skip to content

Instantly share code, notes, and snippets.

@teodragovic
Last active Jul 21, 2016
Embed
What would you like to do?
Two ways to load fonts

Web Font Loader is less verbose but Font Face Observer is smaller script and supposedly loads fonts faster.

Works best with local fonts. Use Font Squirrel to generate .woff and .woff2 and subset only what's needed.

I use cookie to optimize for repeated visits but sessionStorage can also be used (it has nicer API but less support and lasts only for session duartion).

Either JS snippet should be inlined in document <head>. I also wrap whole thing in if (Modernizr.fontface) and
add <link rel="dns-prefetch" href="https://cdnjs.cloudflare.com"> before.

(function(d, w) {
if (d.cookie.replace(/(?:(?:^|.*;\s*)webfont\s*\=\s*([^;]*).*$)|^.*$/, "$1")) {
d.documentElement.className += ' wf-active'; return;
}
function loadFonts() {
var n4 = new w.FontFaceObserver('Roboto', { weight: 400 });
var n7 = new w.FontFaceObserver('Roboto', { weight: 700 });
var i4 = new w.FontFaceObserver('Roboto', { weight: 400, style: 'italic' });
w.Promise
.all([n4.load()])
.then(function(){
Promise.all([n7.load(), i4.load()]).then(function(){
d.documentElement.className += ' wf-active'; d.cookie = 'webfont=true';
});
});
}
var wf = d.createElement('script'), s = d.scripts[0]; wf.async = true;
wf.src = 'https://cdnjs.cloudflare.com/ajax/libs/fontfaceobserver/1.7.1/fontfaceobserver.min.js';
wf.onload = loadFonts; s.parentNode.insertBefore(wf, s);
})(document, window);
@font-face {
font-family: 'Roboto';
src: url('../fonts/roboto-regular.woff2') format('woff2'),
url('../fonts/roboto-regular.woff') format('woff'),
url('../fonts/Roboto-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/roboto-italic.woff2') format('woff2'),
url('../fonts/roboto-italic.woff') format('woff'),
url('../fonts/Roboto-Italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/roboto-bold.woff2') format('woff2'),
url('../fonts/roboto-bold.woff') format('woff'),
url('../fonts/Roboto-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
/**
* or use @import('https://fonts.googleapis.com/css?family=Roboto:400,700,400italic');
*/
body {
font-family: sans-serif;
}
.wf-active body {
font-family: 'Roboto', sans-serif;
}
(function(d) {
if (d.cookie.replace(/(?:(?:^|.*;\s*)webfont\s*\=\s*([^;]*).*$)|^.*$/, "$1")) {
d.documentElement.className += ' wf-active'; return;
}
window.WebFontConfig = {
custom: { families: ['Roboto:n4,i4,n7'] },
active: function() { d.cookie = 'webfont=true'; }
};
var wf = d.createElement('script'), s = d.scripts[0]; wf.async = true;
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
s.parentNode.insertBefore(wf, s);
})(document);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment