teodragovic/README.md

## README.md

      
    Raw
  

              README.md
            
          
    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.

  
## fontfaceobserver.js
(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);

## style.css
@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;
}

## webfontloader.js
(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);
	(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);