Ett typsnitt är inte bara "vackra bokstäver". Det styr uppmärksamheten, sätter stämningen och påverkar direkt läsbarheten. Ett dåligt typsnitt får besökare att lämna en webbplats inom sekunder, även om innehållet är utmärkt.

Ibland besöker du en webbplats och märker att texten ser exklusiv och stilren ut. Du vill ta reda på vilket typsnitt som används, för ditt eget projekt eller av ren yrkesmässig nyfikenhet. Men webbplatsägare märker inte sin typografi, och vissa döper medvetet om typsnitt i CSS för att försvåra identifiering.

Goda nyheter: det går att identifiera ett typsnitt från vilken webbplats som helst. Du behöver inte vara frontendutvecklare eller designer; tre metoder täcker i stort sett alla scenarier. Från webbläsarens inbyggda inspektör till tillägg med ett klick och tjänster för typsnitt i bilder.

💡 Snabb översikt:

• Öppna DevTools (F12) och hitta font-family under fliken Computed

• Installera Whatfont eller Fontanello och för muspekaren över text

• Ladda upp en skärmdump till Font Squirrel Matcherator eller WhatTheFont

1. Inbyggd webbläsarinspektör

Den mest lättillgängliga metoden som inte kräver någon installation alls. Varje modern webbläsare (Chrome, Firefox, Edge, Safari) innehåller utvecklarverktyg (DevTools). Bland dem finns en inspektör som visar CSS-egenskaper för alla element på sidan, inklusive typsnittet.

Så öppnar du det. I Windows trycker du på Ctrl + Shift + I; på Mac Cmd + Shift + I. Eller högerklicka på texten och välj "Inspect" / "View code". Panelen DevTools öppnas.

På panelens vänstra sida ser du HTML-strukturen; till höger CSS-reglerna. Men den snabbaste vägen till typsnittet är via fliken Computed. Bläddra genom listan med egenskaper till font-family; detta är typsnittsnamnet. Bredvid det visar webbläsaren den specifika typsnittsfil som renderas på sidan.

Det finns också en alternativ väg för den som vill se alla webbplatsens typsnitt på en gång. I Chrome DevTools öppnar du fliken Application → sektionen Frames → mappen Fonts. Webbläsaren visar en lista över alla inlästa typsnittsfiler med deras URL och format (woff2, ttf). Det är långsammare, men avslöjar vad som döljs i @font-face.

Fördelar: gratis, kräver inga tillägg, visar exakt typsnittsnamn och dess stil (vikt, stil, storlek). Nackdelar: kräver flera klick; metoden fungerar inte på mobila enheter.

2. Webbläsartillägg

Om du ofta kontrollerar typsnitt kommer ett tillägg att spara timmar åt dig. Principen är enkel: du för muspekaren över text, och tillägget visar typsnittsnamnet och dess CSS-parametrar i ett verktygstips.

2.1 Whatfont

Den populäraste lösningen i denna nisch. Rekommenderas av Wired, Lifehacker och SwissMiss. Installation från Chrome Web Store tar ett klick.

Efter installation klickar du på tilläggets ikon i webbläsarens övre högra hörn för att aktivera detekteringsläget. När du nu för muspekaren över text visar Whatfont typsnittet direkt ovanför markören. Ett klick på texten visar hela kortet: familj, vikt, storlek, radhöjd och färg.

Tillägget fungerar också i Firefox och Safari (via en portning). Gratis, ingen registrering krävs, öppen källkod på GitHub.

🔗 Whatfont i Chrome Web Store

2.2 Fontanello

Medan Whatfont visar information vid hover, fungerar Fontanello via högerklick. Markera text på en sajt, tryck på höger musknapp och välj Fontanello från snabbmenyn. En panel visas med fullständig information: teckensnittsnamn, vikt, storlek, färg och till och med textens kontrastförhållande mot bakgrunden (ett tillgänglighetskriterium).

Fontanello finns tillgängligt för Chrome och Firefox. En extra bonus: tillägget belastar inte sidan med konstant spårning; det aktiveras bara när du efterfrågar det.

🔗 Fontanello i Chrome Web Store

2.3 Fonts Ninja

Ett kraftfullare verktyg med en "font-DNA"-funktion: en egenutvecklad algoritm som analyserar teckensnittsfiler för mer exakta resultat. Utöver att identifiera teckensnitt vid hover kan Fonts Ninja bokmärka hittade teckensnitt och visa en sammanställning av alla typsnitt som används på en sida.

Det finns en hake: bokmärken och vissa funktioner kräver registrering. Men grundläggande teckensnittsidentifiering fungerar utan konto. Tillägget är betalt (med en testperiod), så det är värt att överväga om du arbetar professionellt med typografi.

🔗 Fonts Ninja i Chrome Web Store

3. Hur man identifierar ett teckensnitt från en bild

Inspektören och tilläggen står maktlösa när teckensnittet är en del av en bild: en logotyp, banner eller meme. Text i en bild är inte ett HTML-element, vilket innebär att den inte har några CSS-egenskaper. För sådana fall finns specialiserade tjänster.

3.1 Font Squirrel Matcherator

Ett gratisverktyg från Font Squirrel, beprövat under många år. Så här fungerar det:

• Ladda upp en skärmdump eller ett textfragment till Matcherator-gränssnittet
• Markera området som innehåller bokstäverna (blå markör i verktygsfältet)
• Klicka på "Matcherate It!"

Tjänsten analyserar teckenformerna och returnerar en lista med närmaste matchningar från sin databas. Om det inte finns någon exakt matchning föreslår den visuellt liknande alternativ med en likhetsprocent. Den fungerar till och med med handskrivna teckensnitt, så länge bokstäverna inte sitter ihop.

🔗 Font Squirrel Matcherator

3.2 WhatTheFont från MyFonts

WhatTheFont använder djupinlärning och en databas med över 233 000 typsnitt. Ladda upp en bild, klicka på den bokstav du vill identifiera, så hittar algoritmen matchningar. Dess främsta fördel jämfört med Matcherator: WhatTheFont hanterar sammanhängande skript där bokstäverna flyter ihop. Detta är en seriös teknisk förmåga som äldre tjänster saknar.

För bästa resultat, ladda upp horisontell text med bra upplösning mot en kontrasterande bakgrund.

🔗 WhatTheFont på MyFonts

Video: identifiera ett typsnitt på en minut

En kort demonstration av hur du installerar tillägget Identify Font och hittar ett typsnitt på vilken webbplats som helst utan att öppna DevTools:

⁉️🤔 Vanliga frågor

Kan du identifiera ett typsnitt på en mobilsajt?

Ja, men med begränsningar. Tillägg är inte tillgängliga i mobilwebbläsare, och DevTools finns inte heller där. Så här gör du istället: ta en skärmbild av texten på din telefon och ladda upp den till WhatTheFont eller Font Squirrel Matcherator via en dator. Om texten på sajten är stor och tydlig kommer tjänsten att känna igen typsnittet från skärmbilden lika bra som från en desktopbild.

Vad händer om sajtägaren har döpt om typsnittet i CSS:en?

En del utvecklare ändrar font-family i stilmallarna till ett godtyckligt namn, trots att de faktiskt laddar en specifik typsnittsfil. I det här fallet visar DevTools-metoden via fliken Application (Frames → Fonts) de faktiska webbadresserna till typsnittsfilerna. Från filnamnet (till exempel Inter-Regular.woff2) kan du enkelt identifiera typsnittet. Tillägg som Fonts Ninja med "DNA-analys" kringgår också omdöpning genom att analysera själva filen istället för CSS-egenskapen.

Vilken metod är mest exakt?

För text på en sida: tillägget Whatfont eller Fontanello; en hover så har du det exakta namnet. För bilder: WhatTheFont med sin neurala nätverksmotor är mer exakt än Matcherator för sammanhängande och dekorativa typsnitt. För fullständig säkerhet med omdöpt CSS: DevTools → Application → Fonts, där du ser den faktiska webbadressen till typsnittsfilen; fel är omöjligt här.

Behöver man betala för att identifiera typsnitt?

Nej. Alla metoder som nämns i den här artikeln är gratis. DevTools är inbyggt i webbläsaren. Whatfont och Fontanello är gratistillägg med öppen källkod. Font Squirrel Matcherator är en gratis webbtjänst. WhatTheFont är gratis (intäkterna kommer från typsnittsförsäljning, inte identifiering). Fonts Ninja har en betalversion, men grundläggande typsnittsidentifiering fungerar utan betalning.

Kan man automatiskt tillämpa ett upptäckt typsnitt på sin egen sajt?

Tekniskt sett ja, men juridiskt beror det på typsnittets licens. Du kan fritt identifiera typsnittet. Du får dock bara använda det på din egen sajt om typsnittet har en öppen licens (SIL Open Font License, Apache 2.0) eller om du har köpt en kommersiell licens. Google Fonts, Font Squirrel och Adobe Fonts är säkra källor med tydliga användarvillkor.

Vilken metod för typsnittsidentifiering ska du välja

Om du närmar dig den här frågan för första gången, börja med DevTools. Det är gratis, tar 30 sekunder och kräver ingen installation. För regelbundet arbete med typografi, installera Whatfont: en hover istället för fyra klick.

När ett typsnitt är dolt i en bild, ladda upp en skärmbild till WhatTheFont. Det är den mest tekniskt avancerade gratistjänsten för bildbaserad sökning. Och om typsnittet är omdöpt i CSS:en, nå filen via Application → Fonts i DevTools: den vägen avslöjar sanningen oavsett utvecklarens trick.

Kom ihåg: att hitta ett typsnitt är inte svårt. Den svårare delen är att tillämpa det korrekt. Kontrollera licensen, testa läsbarheten på riktigt innehåll och blanda inte mer än två typsnitt i ett och samma projekt. Bra typografi skriker inte; den fungerar.