@font-face

@ font-face är en programmeringsspecifikation i Cascading Style Sheets (en CSS-regel) som gör att ett teckensnitt kan visas på en webbsida trots att teckensnittet inte är installerat på datorerna hos användarna. Denna utveckling av webbtypografin innebär att webb-utvecklare kan designa sidor utan webbsäkra typsnitt, som i princip alla användare har förinstallerat på datorn. För användare i som använder sig av det latinska alfabetet är Arial, Times New Roman, Verdana, Courier och Trebuchet exempel på sådana webbsäkra fonter.

För att dra uppmärksamheten till en webbsida måste konstruktören ofta, när det gäller titlar, logotyper och rubriker, använda annorlunda, spännande och uppseendeväckande typsnitt. Eftersom alla konstruktörer och designers vill visa upp något unikt är mängden typsnitt på nätet mycket större än det antal fonter som en användare har installerade på sin dator. Det har man hittills löst dels genom att titlar och rubriker som skrivits in i koden med webbsäkra typsnitt har dolts på ett sätt så att de inte kunnat ses i visningsläge, dels genom att de ovanliga typsnitt som man önskat att läsaren ska se i stället har lagts in som fotografier. Användare som försöker kopiera t.ex. en artikel upptäcker ofta att artikelns rubrik(er) består av en eller flera bilder och inte av "bokstäver" som brödtexten. Bokstävernas utseende i rubriker och logotyper finns inte i typsnittsmappen i användarens dator, så sidkonstruktören har ersatt den med en serie fotografier av det roliga, spännande och speciella typsnittet. Med hjälp @ font-face kan man "sluta" med användningen av så många tids- och utrymmeskrävande lösningar för varje rubrik och titel och istället ha en enda teckensnittsfil på servern.

Teckensnitt måste ha en webbfontlicens, och webbdesignern bör som tidigare kontrollera webbplatsen som distribuerar typsnittet eller den dokumentationen som medföljer teckensnitt. Det är inte svårt att använda @ font-face; den nya tekniken innebär att man inkluderar en regel i sin stilmall och hänvisar till teckensnittet nästan som man skulle till en bild. Internet Explorer stöder @ font-face, och har gjort det sedan 2009. Firefox var den sista av de stora webbläsarna att börja stödja det. Det innebär att skaparna av webbsidor inte bara slipper fundera över vilka typsnitt användarna har installerade i sina datorer och vilka rubriker och logotyper som måste monteras in som fotografier, utan dessutom slipper oroa sig för om alla webbläsare ska klara den nya teknologin.

Historik

Webbtypografi handlar om användningen av teckensnitt på World Wide Web. När HTML först skapades, kontrollerades teckensnitt och stilar helt av inställningarna för varje webbläsare (browser). Det fanns ingen mekanism för enskilda webbsidor för att kontrollera teckensnitten på de sidor som laddades upp i hemmen och på arbetsplatser förrän Netscape introducerade <font>-taggen 1995, som då var standardiserad i programmeringsspecifikationen för HTML 2. Dock måste det teckensnitt som specificerades av taggen vara installerat på användarens dator, annars inträdde en "reservlösning" , nämligen att ett av webbläsarens standard sans-seriftypsnitt eller monospacetypsnitt nyttjades av webb-läsaren. Den första Cascading Style Sheets-mallen introducerades 1996, och tillhandahöll i princip samma lösning.

I den första CSS-specifikationen, specificerade konstruktörerna av webbsidor teckensnittens utseende via en kort lista:

• font-family
• font-style
• font-variant
• font-weight
• font-size

Alla typsnitt identifierades enbart med namn. Utöver de egenskaper som anges ovan hade den som gjorde en webbsida inget sätt att formge teckensnitten och ingen mekanism förelåg som kunde välja typsnitt som inte fanns installerade i användarnas datorer.

Webbsäkra typsnitt

CSS2-specifikationen släpptes 1998 och försökte förbättra urvalsprocessen i fråga om teckensnitt genom att skapa en "konflikt", som skulle lösas genom nedladdning av relevanta teckensnitt hos användarna. Dessa metoder fick inte mycket spridning, och togs bort i CSS2.1 specifikationen. Dock lade Internet Explorer till ett stöd för en nedladdningsfunktion i version 4,0, som släpptes 1997. Teckensnittsnedladdning kom senare att ingå i CSS3 och har sedan dess införts från och med Safaris version 3,1, Operas version 10 och Mozilla Firefox 3,5. Detta har sedan ökat designernas intresse för såväl webbtypografi (att sidorna såg snygga och lockande ut) som för användarnas intresse för teckensnittsnedladdning. Användarnas val behövde emellertid inte stämma överens med designernas önskemål om hur sidan "borde" visas. En användare kunde söka efter något så enkelt som det som var mest vilsamt för ögonen vid läsning.

Önskemålet från webbdesignernas sida att innehållet verkligen skulle visas med de teckensnitt som dessa designers önskades låg bakom idén med de webbsäkra teckensnitt som tidigare nämnts. För att säkerställa att alla webbanvändare hade en grundläggande uppsättning typsnitt, introducerade Microsoft ett antal kärnteckensnitt (core fonts) för webben, ett initiativ som påbörjades1996 och avslutades 2002. De frigjorda teckensnitten var gamla bekanta för alla som skrivit ut Word-dokument på sina skrivare. De omfattade Arial, Courier New, Times New Roman, Comic Sans, Impact, Georgia, Trebuchet, Webdings och Verdana, frigjorda under en EULA som gjorde dem fritt utdelningsbara med vissa begränsningar vad gällde nyttjanderätter. Deras höga täckningsgrader gjorde dem till en stapelvara för webbdesigners.

Teckensnittsfamiljer

För att ge webbkonstruktörerna en viss kontroll över utseendet på typsnitten på sina webbsidor även när de angivna teckensnitten inte fanns tillgängliga, tillät CSS-specifikationen användning av flera generiska teckensnittsfamiljer. Dessa familjer utformades för att dela teckensnitt i flera kategorier utifrån deras allmänna utseende. De är en sista utväg när inget av de typsnitt som specificerades finns. Det finns fem allmänna familjer:

• Sans-serif: Teckensnitt som inte har dekorativa markeringar eller serifer på sina bokstäver, siffror och tecken. Dessa typsnitt anses ofta lätta att läsa på skärmen.
• Serif: Teckensnitt som har dekorativa markeringar eller serifer på bokstäver och övriga symboler.
• Monospace: Teckensnitt där alla tecken är lika breda.
• Cursive: Teckensnitt som liknar skrivstil, dvs är kursiva. Dessa typsnitt kan ha ett dekorativt utseende men kan vara svåra att läsa vid små storlekar, så de används i allmänhet sparsamt.
• Fantasy: Teckensnitt som kan innehålla symboler eller andra dekorativa egenskaper, men som fortfarande representerar den angivna uppsättningen bokstäver.

Licensfrågor

En teknik för att ladda ner mer sällsynta teckensnitt presenterades för första gången i CSS2-beskrivningen, som introducerade @ font-face-regeln. Det var (och är) fortfarande kontroversiellt eftersom det kan leda till att teckensnitt används mot sina licensvillkor eller olagligt sprids via webben. TrueDoc (PFR), Embedded OpenType (EOT) and Web Open Font Format (WOFF)) har tillkommit för att hantera dessa frågor. Sedan introduktionen av Internet Explorer 4, har teckensnittsinbäddning, EOT, huvudsakligen använts för att visa tecken i skriftsystem som inte stöds av standardteckensnitt. Användningen på engelskspråkiga webbplatser var länge praktiskt taget obefintlig. Men när Firefox 3,5, Opera 10 och Safari 3,1 släpptes började nyttjandet av teckensnitt utanför standarden sakta att öka.

Genom att använda en specifik CSS @ font-face inbäddningsteknik var det möjligt att bädda in typsnitt så att de arbetade med webbläsarna IE4 +, Firefox 3.5 +, Safari 3.1 +, Opera 10 + och Chrome 4,0 +. Detta medförde att de allra flesta webbanvändare kunde nyttja denna funktion. Vissa kommersiella teckensnittsgjuterierhar rest invändningar mot "redistributionen" av deras typsnitt. Till exempel, säger Hoefler & Frere-Jones, att även om de "entusiastiskt applåderar" framväxten av en mer uttrycksfull webb med säkra och tillförlitligt använda högkvalitativa typsnitt, så leder den nuvarande leveransen av teckensnitt med hjälp av @ font-face till en "olaglig spridning" av gjuteriets upphovsrätt och patent, vilket inte är tillåtet. Naturligtvis gäller inte detta typsnitt och gjuterier inom fria licenser.