@font-face Med CSS-funksjonen @font-face kan du fri deg fra de websikre fontene og bygge inn de skrifttypene du vil på nettsidene dine, og leserne trenger ikke å ha disse skriftene installert. Du lagrer dem på webserveren, og de lastes som nevnt inn samtidig med nettsiden. Koden i CSS-filen ser omtrent slik ut: @font-face{ font-family: 'MyWebFont'; src: url('WebFont.eot'); src: url('WebFont.eot?#iefix') format('embedded-opentype'), url('WebFont.woff') format('woff'), url('WebFont.ttf') format('truetype'), url('WebFont.svg#webfont') format('svg'); }
@font-face støttes av Chrome, Firefox, Internet Explorer, Opera og Safari. Fontformater: WOFF/WOFF2 (Web Open Font Format) er raskere enn for eksempel OTF (OpenType) og TTF (TrueType) og er i ferd med å bli standarden for alle nettlesere. SVG/SVGZ (Scalable Vector Graphics (Zip)) er et vektorformat. Det gir mindre filstørrelse, noe som gjør formatet ypperlig for mobilbruk. Støttes ikke av Internet Explorer og Firefox. EOT (Embedded Open Type) støttes bare av eldre versjoner av Internet Explorer. OTF/TTF har ofte vært ulovlig kopiert, og dette var en av grunnene til at WOFF ble utviklet. Støttes av alle nettlesere. Les mer om @font-face og hvilke nettlesere som støtter hva, på w3schools.com.
FontSquirrel, som har et godt utvalg av gratis skrifter, har en tjeneste som genererer CSS-koden for deg. I stedet for å laste opp fontene til din egen server, kan du la nettsiden hente dem fra eksterne skriftleverandører, for eksempel abonnementstjenesten TypeKit eller Google Fonts. Google Fonts har per i dag over 600 gratis webfonter.
Lisenser og leverandører Lisensene og prisene kan være forskjellige for webfonter og trykkfonter. Lisensvilkårene definerer tillatte bruksområder for en font. Her er noen fontleverandører: FontSquirrel Fonts.com MyFonts Fontspring Google Fonts UrbanFonts DaFont Lær mer fra eksperter: 15 eksperttips for valg av webfonter En font er bare en font, eller? Bouvet går metodisk til verks når de skal velge skrifttyper. 5