Inledning

Vi rekommenderar att man laddar in fonterna med hjälp av Web font loader.

Med Web font loader kan man asynkront ladda in fonterna och även sätta en maxtid inladdningen får ta. Detta är bra då texten inte renderas/visas innan fontfilerna är laddade i browsern.

Det finns även ett antal events och parametrar som ger en ytterligare kontroll. Alla parametrar och dokumentation hittar du på Web font loaders github sida.

Exempel

Exempel på hur Web font loader kan användas för att asynskront ladda Stockholm Type och Open Sans.

Javascript

WebFontConfig = {
	google: {
		families: ['Open+Sans:400italic,400,300,600:latin']
	},
	custom: {
		families: ['Stockholm Type:n4,n7'],
		urls: ['//font.stockholm.se/css/stockholm-type.css']
	},
	timeout: 3000
};

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

CSS

html {
	font-family: "Open Sans", sans-serif;
}

h1 {
	font-family: "Stockholm Type", sans-serif
	font-weight: 700;
}

.wf-opensans-n4-inactive,
.wf-stockholmtype-n7-inactive h1 {
	font-family: Arial, sans-serif;
}