Du har sett det hända: du surfar på en sajt och plötsligt stannar du upp. Typsnittet i rubriken är så snyggt att du redan föreställer dig hur det skulle se ut i ditt projekt. Men vad heter det? Sajtägaren svarade inte, källkoden har förvrängd CSS, och att googla "snygg serif med konstigt G" kan ta dig till morgonen.

Formgivare går ständigt i den här fällan. Att sålla igenom gigabyte av samlingar i hopp om en träff är ett lotteri. Och tänk om typsnittet inte finns där alls?

Lyckligtvis ger 2026 oss en uppsättning verktyg som löser problemet på sekunder. Vissa arbetar med uppladdade bilder, andra arbetar direkt på livesidor. Vi går igenom 9 sätt att identifiera ett typsnitt: från klassiska tjänster till bokmärkesappar som väger noll megabyte.

💡 Snabb översikt:

• Ladda upp en skärmdump med text till WhatTheFont eller WhatFontIs, och få typsnittsnamnet (ofta med ett gratis alternativ).
• Installera tillägget Fonts Ninja eller WhatFont, för muspekaren över text på en sajt och se namn, storlek, radavstånd och färg.
• Har du inte ens en skärmdump, öppna Identifont, svara på 5-10 frågor om bokstavsformer och få en träff.
• Hittade du typsnittet, ladda upp det till sajten via CSS @font-face (eller ett tillägg för WordPress) och använd det.

Onlinetjänster: identifiera typsnitt från uppladdade bilder

Dessa fyra verktyg fungerar enligt en gemensam princip: du ger dem en bild med text, och de kör den genom en databas med hundratusentals typsnitt och returnerar träffar.

1. WhatTheFont, guldstandarden från MyFonts

WhatTheFont från MyFonts är den mest träffsäkra typsnittsidentifieraren 2026. Under huven finns djupinlärning baserad på en databas med över 233 000 typsnittsstilar. Ladda upp en bild, klicka på texten, få en lista med träffar. Databasen lutar åt kommersiella typsnitt, men erbjuder nästan alltid gratisalternativ också.

Fördelar: utmärkt träffsäkerhet på standardtypsnitt, mobilapp för iOS och Android, ingen registrering krävs. Nackdelar: svag på handskrivna och kraftigt stiliserade typsnitt, den inbyggda beskärningen kapar ibland staplar och underhäng.

🔗 WhatTheFont på MyFonts

2. WhatFontIs, största databasen (över 900 000 typsnitt)

WhatFontIs har den största databasen, över 900 000 typsnitt. Kör den som andra alternativ om WhatTheFont inte gav ett säkert resultat.

Huvudfunktion: automatiskt urval av gratisalternativ från Google Fonts till betalträffar. För en webbprojektbudget är detta en timme sparad tid.

Fördelar: största indexet, förslag på gratisalternativ, webbläsartillägg. Nackdelar: gratisversionen är fullproppad med annonser, du måste markera symboler manuellt innan sökning.

🔗 WhatFontIs

3. Fontspring Matcherator, träffsäkerhet på OpenType

Fontspring Matcherator är en favorit bland designers som jobbar med oberoende typsnittsbolag. Till skillnad från WhatTheFont (MyFonts katalog) täcker Matcherator indie-typsnitt, upptäcker OpenType-funktioner (ligaturer, alternativa glyfer) och stöder dra-och-släpp.

Fördelar: gratis, stark på webbtypsnitt, jämförelse sida vid sida. Nackdelar: mindre databas än MyFonts, känslig för bildkvalitet.

🔗 Fontspring Matcherator

4. Font Squirrel, gratis typsnitt och noll reklam

Font Squirrel byggde sitt rykte på att kurera gratis typsnitt för kommersiellt bruk. Deras Matcherator är den mest minimalistiska: ladda upp, beskära, få resultat. Ingen reklam, inga popup-fönster. Signaturfunktionen är bildrotation: om typsnittet står i en vinkel hanterar Font Squirrel det där andra misslyckas.

Fördelar: renaste gränssnittet, gratis typsnitt, snabba resultat. Nackdelar: databasen är liten, hittar nästan aldrig kommersiella typsnitt.

🔗 Font Squirrel Matcherator

Webbläsartillägg: identifiera typsnitt direkt på sajter

Onlinetjänster är bra för bilder. Men om typsnittet finns framför dig just nu, på en live-webbsida, ger webbläsartillägg dig svar på sekunder. Inga skärmdumpar, inga nya flikar.

5. Fonts Ninja, prova, köp, ladda ner

Fonts Ninja (tidigare FontFaceNinja) är den ohotade ledaren bland typsnittsidentifierare för webbläsare. Tillägget finns för Chrome, Firefox, Safari och Edge.

För muspekaren över text så ser du typsnittsnamn, storlek, radavstånd, färg och teckenmellanrum. Men viktigast av allt: Fonts Ninja låter dig prova typsnittet. Skriv din egen text och se den i realtid i just det typsnittet. Och om du gillar det laddar du direkt ner gratisversionen eller går vidare för att köpa den kommersiella.

Bonus: en maskknapp som döljer alla annonser och bilder på sidan och bara lämnar typografin i ren form. För en designer som utvärderar layout är detta ovärderligt.

Fördelar: komplett uppsättning, identifiera, prova, ladda ner; fungerar i 4 webbläsare. Nackdelar: för avancerade filter (bokstavsformer, licenstyp) behöver du registrera dig.

🔗 Fonts Ninja på Chrome Web Store

6. WhatFont, hovra och lär dig allt

WhatFont är ett tillägg som rekommenderas av Wired och älskas av webbutvecklare för sin enkelhet. Finns för Chrome och Firefox.

För muspekaren över text så dyker typsnittsnamnet upp. Klicka så får du en komplett karta över CSS-egenskaper: familj, vikt, storlek, radavstånd, färg i HEX. Det här är inte bara en identifierare, det är en typografiinspektör. Om typsnittet kommer från Google Fonts-katalogen ger WhatFont en direkt nedladdningslänk.

Fördelar: omedelbart resultat, djup CSS-analys, länkar till Google Fonts. Nackdelar: identifierar inte typsnitt i bilder (endast live-text på sidan), låter dig inte prova typsnittet med din egen text.

🔗 WhatFont på Chrome Web Store

7. Typ.io, typsnittsparningar och inspiration

Typ.io löser uppgiften ett steg längre: det räcker inte att identifiera typsnittet, du vill förstå vad det passar ihop med. Efter att du installerat tillägget dyker en "T"-knapp upp i webbläsarens hörn. Klicka på den så ser du alla sidans typsnitt som en separat lista. Klicka på ett namn så kommer du till typsnittskortet med parningsexempel: "detta typsnitt används tillsammans med..."

Själva Typ.io-sajten är en databas med verkliga designbeslut: communityn laddar upp skärmdumpar av sajter med nedbrytningar av typsnittskombinationer. För den som inte bara vill hitta ett typsnitt utan också förstå sammanhanget det används i.

Fördelar: urval av typsnittsparningar, databas med verkliga exempel. Nackdelar: tillägget visar bara typsnittsnamn (utan CSS-detaljer), full funktionalitet kräver registrering.

🔗 Typ.io

8. Fount, ett bokmärke som väger noll

Fount är inget tillägg, det är ett bokmärke. Du lägger till en knapp i webbläsarens bokmärken, går till valfri sajt, klickar på bokmärket så förvandlas markören till ett hårkors. Klicka på text så visas ett fönster med typsnittsnamn, storlek, vikt och stil. Klicka på bokmärket igen för att stänga av läget.

Idealiskt val för den som inte vill belamra sin webbläsare med tillägg. Fungerar i Safari, Chrome, Firefox och IE8+. Kräver inga uppdateringar, samlar ingen data, använder inga bakgrundsprocesser. Det bara fungerar.

Fördelar: ultralätt, plattformsoberoende, inget att installera. Nackdelar: identifierar bara det som faktiskt renderades i font-stacken (inte vad som är avsett i CSS), inga detaljer som färg.

🔗 Fount, lägg till bookmarklet

Specialmetod: när det inte finns någon bild eller webbplats

9. Identifont, identifiera typsnitt via beskrivning

Identifont är det äldsta verktyget i den här samlingen (sedan 2000), men fortfarande oumbärligt. Det tar inte emot bilder och skannar inte webbplatser. Istället ställer det frågor: har bokstaven "Q" seriffer? Är öglorna på gement "g" sammankopplade? Hur ser "&"-tecknet ut?

Du svarar på 5-10 frågor, Identifont snävar in urvalet och ger en träff. Låter ålderdomligt, men det är den enda fungerande metoden när du varken har en skärmbild eller en URL, bara ett minne av hur typsnittet såg ut.

Fördelar: fungerar helt utan bild, tränar det typografiska ögat. Nackdelar: långsamt (5+ minuter per sökning), webbplatsens design har inte uppdaterats på årtionden, databasen är sämre än moderna tjänsters.

🔗 Identifont

Jämförelsetabell: vad ska du välja

Det finns inget enskilt perfekt verktyg. Proffsmetoden: ladda upp bilden till WhatTheFont, kör en andra vända i Fontspring Matcherator och titta på snittet. Det namn som upprepas är sanningen.

Så laddar du upp det hittade typsnittet till en sajt

Du har identifierat typsnittet, laddat ner filen, nu behöver du lägga till det på sajten. Den mest universella metoden är @font-face.

Steg 1. Ladda ner typsnittet i .ttf- eller .otf-format.

Steg 2. Konvertera till webbformat via Font Squirrel Webfont Generator. Resultatet ger dig .woff, .woff2 och .ttf, plus en färdig CSS-fil. WOFF2 är huvudformatet för webben 2026, det stöds av 98% av webbläsarna.

Steg 3. Ladda upp typsnittsfilerna till servern via FTP eller webbhotellets filhanterare, till mappen /wp-content/themes/your-theme/fonts/.

Steg 4. Skriv @font-face i CSS:en:

1
@font-face {
2
  font-family: 'MyCustomFont';
3
  src: url('fonts/MyCustomFont.woff2') format('woff2'),
4
       url('fonts/MyCustomFont.woff') format('woff');
5
  font-weight: 400;
6
  font-style: normal;
7
  font-display: swap;
8
}

Direktivet font-display: swap är avgörande: webbläsaren visar först systemtypsnittet, och när det anpassade laddats byter den ut det. Utan det förblir texten osynlig tills typsnittet har laddats ner.

Steg 5. Applicera typsnittet på element:

1
h1, h2, h3 {
2
  font-family: 'MyCustomFont', sans-serif;
3
}

WordPress: tillägget Custom Fonts ger ett visuellt gränssnitt för att ladda upp valfria typsnitt. Eller skriv @font-face i barntemats functions.php via wp_head-hooken.

Gör en säkerhetskopia innan du redigerar några temafiler. Ett fel i @font-face eller functions.php kan krascha sajten.

Se en kort video som visar hela processen, från skärmdump till färdigt typsnittsnamn, med WhatTheFont:

⁉️🤔 Vanliga frågor

Varför hittar inte WhatTheFont mitt typsnitt?

Tre huvudorsaker: dålig bildkvalitet, texten är roterad i vinkel eller så är typsnittet handskrivet. Ta en större skärmdump, mot en kontrasterande bakgrund och horisontellt. Hjälpte inte, prova Fontspring Matcherator och WhatFontIs. För handskrivna typsnitt finns ofta ingen exakt matchning i princip: de är unika.

Kan man identifiera ett typsnitt från en PDF-fil?

Ja, om texten inte är rastrerad. Öppna PDF:en, markera texten och ta en skärmdump. Ladda upp till valfri tjänst bland de fyra första. För skanningar beror resultatet på upplösningen: 150 DPI och högre ger acceptabel träffsäkerhet.

Typsnittet identifierades, men det är betalt. Var hittar jag ett gratis alternativ?

WhatFontIs erbjuder automatiskt gratis alternativ från Google Fonts under varje betald matchning. Manuellt: gå till fonts.google.com, ange namnet på det hittade typsnittet och titta på visuellt liknande. Gratis ersättningar: med seriffer, Playfair Display, Lora, Merriweather; sans-serif, Inter, Roboto, Manrope.

Vilket typsnittsformat ska jag använda för webben 2026?

WOFF2 är det huvudsakliga, WOFF är fallback för äldre webbläsare. TTF och OTF bör inte användas på webben: de väger 2-3 gånger mer utan komprimering. Font Squirrel-generatorn (nämnd ovan) konverterar allt till WOFF2+WOFF med ett klick.

Vad du ska använda 2026: slutlig sammanställning

Nio verktyg betyder inte att du behöver använda alla. Här är en enkel urvalsmatris:

• Har en skärmdump → WhatTheFont, sedan Fontspring Matcherator för dubbelkoll.
• Behöver ett gratis alternativ → WhatFontIs (automatiskt urval från Google Fonts).
• Typsnitt på en aktiv sajt → Fonts Ninja eller WhatFont (tillägg på 5 sekunder).
• Inget tillgängligt, bara minnet → Identifont.
• Vill inte installera tillägg → Fount (bokmärke i bokmärkesfältet).

Och om inget verktyg fungerade, öppna DevTools (F12 → Inspektera → Computed → font-family). Otympligt, men pålitligt. Och ingen har avskaffat subredditen r/identifythisfont: aktiva designers namnger typsnittet på ett par minuter.

Ett bra typsnitt förändrar upplevelsen av en sajt snabbare än att layouta om tre block. Nu har du allt du behöver för att hitta det där enda och sätta det i ditt projekt.