Dette er en test på import av egne fonter i html 5. I tillegg bruker jeg en del css3 egenskaper for å skape effekter. 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.

Dersom du selv ønsker å teste hvordan fonter oppfører seg i en nettleser (som støtter @font-face import), kan dette gjøres på http://labs.thecssninja.com/font_dragr/. 

Programmet lar deg dra og slippe TrueType (TTF), OpenType (OTF), Scalable Vector Graphics (SVG) eller Web Open Font Format (WOFF) skrifter i siden for en umiddelbar forhåndsvisning av hvordan skriften vil bli gjengitt i nettleseren.

Mine tester:

Dette er GeosansLight

Kilde: www.dafont.com

Dette er Chopin Script

Kilde: www.dafont.com

Dette er Chopin Script med tekstskygge

Kilde: www.dafont.com

Dette er Orial OpenType uten tekstskygge

Orial OpenType bold

Kilde: www.dafont.com

Dette er Orial OpenType med tekstskygge

Orial OpenType bold

Kilde: www.dafont.com

Dette er Orial OpenType med rgba opacity 0,5 og tekstskygge

Orial OpenType bold

Kilde: www.dafont.com

Eksempler på CSS kode for importen:

.OrialOpenType {
font-size:60px;
left:70px;
position:relative;
top:35px;
text-shadow: 2px 2px 2px #fff;
}
.TextShadow {
text-shadow: 4px 4px 4px #666;
}
.textOpacity {
color: rgba(0, 0, 0, 0.5);
text-shadow: 5px 5px 5px #bbb;
}

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