Siden CSS3's indtog har dette dog ændret sig. Vha. CSS-funktionen @font-face, kan man nu inkludere skrifttyper på sin hjemmeside, uafhængigt af den besøgendes udvalg af skrifttyper. Dette opnås ved at placere skrifttypen (enten .otf eller .ttf) direkte på serveren, og så inkludere den vha. CSS. Denne funtionalitet er pt. understøttet i Firefox, Safari, Chrome og Opera.
Internet Explorer var rent faktisk de første til at implementere denne funktion, og har siden IE5 understøttet @font-face.
Vent, er det så nemt? Virker det virkelig i IE? Ja, men der er selvfølgelig en hage. IE understøtter kun en bestemt format af skrifttyper, nemlig Embedded OpenType (EOT). Dette format bruges kun af IE, og virker ikke i de andre browsere. Det kræver derfor et lille CSS hack at få dette til at virke i alle browsere.
Skudsikker metode
Der findes en skudsikker metode til at inkludere sine skrifttyper:
@font-face {
font-family: 'TitilliumText14LRegular';
src: url('TitilliumText1-webfont.eot');
src: local('☺'),
url('TitilliumText1-webfont.woff') format('woff'), url('TitilliumText1-webfont.ttf') format('truetype');
}
Skrifttypens navn
I den første linje gives skrifttypen et navn, for senere brug i CSS-regler.
IE inkludering
I anden linje linkes til IE skrifttypen i .eot format. Andre browsere vil ignorere denne linje.
Inkludering i resten af browserne
I tredje linje søges efter alternativer til andre browsere. Først søges lokalt vha. local. IE forstår ikke dette, og vil derfor ignorere denne linje. En lokal søgning kan være nyttig, hvis den besøgende tilfældigvis har skrifttypen liggende på sin computer.
Grunden til at jeg i eksempler udskifter den lokale søgning med en smiley (og på denne måde deaktivere funktionen) er, at der kan være en risiko for at den besøgende har en skrifttype med samme navn, men andet indhold. Dette vil føre til at en forkert skrifttype vil blive brugt på siden. Er det ikke noget du frygter, så skift smileyen ud med skrifttypens navn.
Derefter søges på serveren efter en .woff version af skrifttypen (nyt, mindre format understøtter af Firefox 3.6+). Derefter på en .ttf version af skrifttypen.
Problemer i IE med Cleartype
I IE7 og IE8 kan der opstå det problem, at skrifttypen vil fremstå pixeleret eller kantet. Skrifttypen vil dog stadig virke. Dette skyldes ClearType funktionen, som egentlig er designet til at gøre tekst mere læsbar, ved at gøre den mere "hård". I dette tilfælde er det dog kun til gene, og ødelægger i høj grad æstetikken.
I dette blogindlæg introduceres en løsning på dette problem med jQuery.
Finde lækre fonts
Det første du skal være opmærksom på når du bruger skrifttyper med @font-face funktionen er, at når skrifttypen ligger på din server, så vil alle kunne downloade den. Licensen til skrifftypen skal derfor tillade at du bruge den på nettet.
Det næste brydende punkt er at skaffe skrifttypen i en .eot version til brug i Internet Explorer. Det er ikke altid nemt. Men her kommer et fantastisk værktøj til hjælp. Font Squirrels Font Face Kit Generator lader dig nemt generere kits til inkludering i alle browsere. Du får desuden en HTML og CSS fil med, der viser hvordan den skal indsættes. Nemt, lækkert og uundværligt!
Font Squirrel har desuden en lang række font-face kits liggende, som du kan kigge igennem.
Demo
Se en demo af teknikken her. Skrifttypen i demoen er Titillium.
