Fonttjänst

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 Loader på Github.

Exempel

Exempel på hur Web Font Loader kan användas för att ladda Stockholm Type asynkront.

Javascript

WebFontConfig = {
    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: Verdana, Arial, sans-serif;
}

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

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