Web Font Loader Setup

by Eric

HTML

<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
Two ways to run the <a href="https://github.com/typekit/webfontloader">Web Font Loader</a>
<br />
Open Sans and Ubuntu

CSS

/* */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);
/* */
/* */
@import url(http://fonts.googleapis.com/css?family=Ubuntu:400,700,400italic,700italic);
/* */

body
{
	font-family: 'Open Sans', 'Ubuntu', sans-serif;
	font-size: 14px;
	font-weight: 400;
}
/* Change font-size based on font-family 
 * We get these classes from the webfontloader: https://github.com/typekit/webfontloader
*/
.wf-ubuntu-n4-active body
{
	font-size: 13px;
}
.wf-opensans-n4-active body
{
	font-size: 14px;
}

JavaScript

"use strict";

/* */
WebFont.load({
	custom: {
		families: ['Open Sans', 'Ubuntu']
	}
});
/* */

/* * /
// Remove the external resource(on the left) before using this snipped
window.WebFontConfig = {
    custom: {
		families: ['Open Sans', 'Ubuntu']
	}
};

(function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
        '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
})();
/* */