Skip to content

Instantly share code, notes, and snippets.

@teodragovic
Last active July 21, 2016 11:30
Show Gist options
  • Save teodragovic/81aa001d6ccf44e25cc82cdf624947f8 to your computer and use it in GitHub Desktop.
Save teodragovic/81aa001d6ccf44e25cc82cdf624947f8 to your computer and use it in GitHub Desktop.
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