Webbteckensnitt för WordPress

Teckensnitt (fonts) styr hur din text visas – hur bokstäverna faktiskt ser ut. Som standard kan webbplatser endast visa text med teckensnitt som är installerade på en webbplatsbesökares dator. På grund av antalet olika operativsystem och versioner och hur teckensnitt är licensierade, finns det inte många riktigt webbsäkra typsnitt – d.v.s. som är installerade på praktiskt taget allas datorer. Så de flesta webbplatser använder standardteckensnitt. Ett sätt att få en webbplats att sticka ut är att introducera mer unika typsnitt.

Med WordPress, som med vilken webbplats som helst, finns det ett antal sätt att uppnå detta. I den här artikeln kommer vi att titta på några olika tekniker och går igenom dess respektive för- och nackdelar. Vi berättar också vilken lösning vi rekommenderar och vad vi behöver av dig om du vill att vi ska inkludera icke-webbsäkra typsnitt på din webbplats. Det är viktigt att alla krav på webbteckensnitt tydligt inkluderas i alla förslag som kommer överens med dig om – vår standardposition är att inte inkludera stöd för webbteckensnitt.

Hur är det med typsnitt i grafik?

Den här artikeln gäller endast ”livetext” som behöver vara redigerbar via innehållssytemet och maskinläsbar på webbplatsen. Om du vill skapa grafik som innehåller text kan du använda de typsnitt du har licens för.

Hur gör WordPress det enkelt att arbeta med webbteckensnitt?

Även om dessa tekniker kan användas på nästan vilken webbplats som helst, gör WordPress det enkelt. Kommersiella teman kommer ofta med anpassade typsnitt som är förinstallerade och tillgängliga för dig att använda fritt. Många webbtypsnittsleverantörer har tillägg tillgängliga för att göra det väldigt enkelt att integrera sina typsnitt. Ofta ger teman eller tillägg dig enkla konfigurationsalternativ för att ställa in alla inställningar för teckensnitten för alla olika delar av webbplattsen – ingen kodning krävs! Detta minskar utvecklingskostnaderna och lämnar teckensnittskontrollen i dina händer även om du inte kan skriva en kodrad.

Tekniker

Alla tekniker fungerar på olika sätt, vissa kostar pengar, slöar ner laddtider, skapar en tillfällig fördröjning innan text visas eller kan inte visas i äldre webbläsare. Nedan går vi igenom var och en av dessa tekniker och lyfter fram för- och nackdelar

Native @font-face

Detta är en CSS-teknik (stilmall) som laddar in faktiska teckensnittsfiler i besökarens webbläsare. Dessa teckensnittsfiler kan laddas från en fjärrserver eller direkt från din egen webbserver. Det kan användas med antingen betal- eller gratis typsnitt och är den faktiska mekanismen genom vilken många kommersiella och molnbaserade teckensnittstjänster för webben fungerar, även om implementeringen varierar från leverantör till leverantör. Tjänster som Font Squirrel hjälper dig att hitta och generera koden du behöver.

Fördelar

• Nästan obegränsat urval av typsnitt
• Oberoende

Nackdelar

• Fungerar inte i alla webbläsare
• Olika webbläsare behöver olika teckensnittsfiler
• Kan orsaka långsammare sidladdning
• Inga sidvisnings-/bandbreddsbegränsningar

För mer information, se W3schools @font-face.

Integrering via tredje part

Dessa är kommersiella teckensnittsleverantörer som Fonts.com och Adobe Fonts erbjuder sina egna teckensnittsbibliotek och integrationstekniker med CSS eller JavaScript. Varje tjänst varierar i kostnad, implementeringsteknik och olika andra faktorer, men valet styrs vanligtvis av typsnittet du vill använda, så efter det gäller det att ta reda på hur man får bästa resultat med det typsnittets leverantör.

Fördelar

• Brett utbud av professionella typsnitt tillgängliga
• Teckensnitten är optimerade för webben
• Det finns i allmänhet ett bredare utbud av teckensnittsvikter och varianter
• Stegvis prissättning
• Slöar inte ner sidladdningen märkbart tack vare en globalt distribuerad leveransinfrastruktur
• Support är ofta tillgänglig direkt från leverantören

Nackdelar

• Brukar kosta pengar
• Du kan behöva separata licenser för olika typer av användning
• Din webbplats optimala visning förlitar sig nu på en tredjepartstjänst (även om vissa leverantörer erbjuder egenhostade alternativ)
• Det finns ibland en FOUC (Flash Of Unstyled Content) där du ser den ursprungliga textstilen (även om det ofta finns en fix för detta), eller en fördröjning i teckensnittsladdningen
• Man brukar behöva lära sig hur man använder leverantörens kontrollpanel t.ex. TypeKits editor

Google Web Fonts (vår rekommenderade lösning)

Det här är en samling gratis webbteckensnitt baserat på öppen källkod som tillhandahålls av Google, liknande tjänster som Typekit/Fonts.com.

Fördelar

• Val mellan att ladda från Googles servrar (snabbt) eller din egen
• Massor av val
• Open source
• Gratis
• SSL-stöd

Nackdelar

• Att visa vissa teckensnitt från Googles servrar fungerar inte i vissa versioner av Internet Explorer
• Färre teckensnittsvikter och stilvariationer
• Vissa typsnitt är inte kompletta eller är inte 100% webboptimerade
• Ingen officiell support, bara onlinedokumentation och forum (precis som alla andra gratis Google-produkter)
• Inga sidvisnings-/bandbreddsbegränsningar

Ersättningstypsnitt

Dessa tekniker, som Cufon och sIFR, används mer sällan (aldrig) nu när andra webbteckensnittstekniker finns, men de drev på den ökade tillgängligheten av webbteckensnitt. Dessa system använder JavaScript eller Flash för att dölja den orginaltexten och ersätta den med text ritad med kod.

Fördelar

• Vid ett tillfälle var dessa det enda gångbara sättet att använda anpassade teckensnitt online

Nackdelar

• Involverar att ladda 3:e parts bibliotek såväl som teckensnittsfiler, det går med andra ord långsammare
• Det orsakar ofta en FOUC (Flash Of Unstyled Content) där du ser originaltexten innan ersättningen initieras (även om det finns en fix för detta också)
• Flash används inte längre, sIFR är där med inte längre ett gångbart alternativ

Vad vi behöver av dig

1. Teckensnittsfilerna och koden från din leverantör eller
2. Tillgång till din teckensnittsleverantörs kontrollpanel så att vi kan generera koden

Om det finns en licensavgift att betala är det upp till dig att organisera (både nu och löpande). Låt oss veta om det finns något vi kan göra för att hjälpa.

Slutsats

Att använda icke-standardiserade typsnitt är ett bra sätt att få din webbplats att sticka ut från andra. Det finns ett antal olika tekniker som kan användas för att använda icke-webbsäkra typsnitt på webbplatser, inklusive WordPress-webbplatser. Hos Angry Creative rekommenderar vi att du använder Google Web Fonts eftersom det är en vinst för gratis programvara med öppen källkod och det finns ett bra utbud av webbteckensnitt av hög kvalitet.

Om du vill att vi ska implementera webbteckensnitt som en del av ditt nya eller befintliga WordPress-projekt, kontakta oss idag.