Dette er en test på import av egne fonter i html 5. Alle fontene som er brukt er hentet fra www.dafont.com. Importen av disse fontene vil forsinke lastingen av siden noe, så jeg begrenser bruken til bare å gjelde overskrifter. Bruker du Internet Explorer, går du glipp av denne moroa.

Dette er GeosansLight

Kilde: www.dafont.com

Dette er Chopin Script

Kilde: www.dafont.com

Orial OpenType bold

Kilde: www.dafont.com

Eksempler på CSS kode for importen:

@font-face {
font-family: GeosansLight;
src: url(fonts/GeosansLight.ttf);
}
@font-face {
font-family: chopinScript;
src: url(fonts/CHOPS.ttf);
}
h4.geosanslight {
font-family:GeosansLight;
font-size: 26px;
}
h4.chopin_script {
font-family:chopinScript;
font-size:36px;
}

Styling av fonten i css

Jeg testet litt fram og tilbake med endring av presentasjon av fonten, ved f.eks å sette font-weight til bold, og å endre på letter-spacing. Teknisk sett lar dette seg gjøre, men jeg synes ikke resultatet ble spesielt bra. Jeg tror det vil variere fra font til font. 

Nettleserstøtte

Dette eksperimentet fungerte i Google Chrome 3.0, Firefox 3.5, Opera 10.0 og Safari 4 for windows

Min opplevelse med bruk av denne måten å importere fonter direkte inn i nettleseren, er så langt blandede. Nettleserne gjengir fontene med ulik kvalitet, og IE evner ikke å gjengi fontene overhodet.

Her er en artikkel fra position-absolute.com som tar for seg noen av de samme problemstillingene som jeg opplever: 

Leave a Reply