Webbfont vs. Desktop font

Vad är webbfont och desktop font egentligen? Vad använder man dem till och när ska man använda vilken? Det kan kännas som en djungel, vi vet, därför ska vi reda ut det här en gång för alla.

Desktopfont
Till en början, en webbfont används på webben och en desktopfont används på desktop. Låt säga att du ska göra en annons med bild och text. När du skapar layouten så använder du fonter som är installerade på datorn för att ändra utseendet på texten. Det är desktopfonter. Dem installerar du lokalt på din dator, kan använda i arbetet och t.ex. skriva ut.

För att göra layout måste du fortfarande ha desktopfonten.

När annonsen sedan kodas i html5 och ska gå live så uppstår då ett problem. Användaren måste då ha samma font installerad på sin dator, som du använt när du skapade layouten, för att texten ska se ut som du tänkt. Det blir ju lite tokigt, eftersom de flesta varumärken har egna unika fonter.

Vanligaste lösningen är att spara ut all text som bilder, på så sätt kringgår vi problematiken och är helt säkra på att det alltid kommer att se rätt ut.

Webbfont
I vissa fall är det inte möjligt att ha texten som bild, eller helt enkelt smartare att ha texten som just text istället. Då använder man en webbfont. Filen eller filerna för webbfonten läggs då in i leveransen så att när användaren ser annonsen så läser webbläsaren även av fontfilen och kan visa annonsen med rätt font. Nackdelen här är att fontfilens vikt räknas med i annonsens totala vikt, vilket kan ställa till det om man har låg KB-gräns.

En webbfont går inte att installera på datorn. Den använder man alltså bara när man publicerar på webben.

Det man kan göra för att lösa viktproblemet är att länka in en webbfont från en extern server. Alltså att fontfilen inte ligger i leveransmappen, utan att annonsen länkar till fontfilen som ligger online någon annanstans.

Det kan vara på en egen server, men det finns även något som kallas fontbibliotek. Google har ett eget bibliotek med webbfonter man kan använda sig av. Där kan man ofta hitta en font som är snarlik den man vill använda och länka in den istället.

Det smarta med fontbibliotek som det på Google är att om en användare laddat in en font från det biblioteket en gång så behöver den inte hämta den en andra gång. Webbläsaren sparar den fonten så att den finns nära till hands nästa gång det dyker upp innehåll som länkar till samma font. Smart va?

 

Frågor och funderingar?

Prata med Andreas Nilsson, en av våra utvecklare.
Du når honom via: