Du scrollar genom ett flöde av webbplatser och plötsligt dyker den upp. Det perfekta typsnittet du letat efter i veckor. Den där speciella utsmyckningen på gemenerna "a" och proportionerna som får typografen inom dig att jubla av förtjusning. Men namnet? Webbplatsens skapare har inte märkt ut det, att gräva i CSS tar tid, och designern som gjort det är på semester.

Ett typsnitt på skärmen är en CSS-egenskap, inte en bild. Webbläsaren avslöjar ärligt talat namnet, vikten, storleken och till och med stilgjuteriet för den som vet var man ska titta. Under de senaste åren har verktyg för typsnittsidentifiering utvecklats från en flik i DevTools till tillägg som visar licenspriser, föreslår gratisalternativ och bokmärker fynd i en samling.

I den här guiden, fem metoder: från omedelbar (högerklick) till avancerad (analys av typsnittets binärfil). Ingen kräver en designexamen eller betald prenumeration.

💡 Snabb översikt:

• Fontanello: högerklicka, så finns typsnittsnamnet redan i snabbmenyn (Chrome, Firefox, Edge, iOS)
• WhatFont: för muspekaren över text, se familj, storlek, färg och leveranstjänst (Chrome, Safari)
• Fonts Ninja: identifierar typsnittet, visar priset, sparar fynd i bokmärken (Chrome)
• Inbyggd inspektör: universell metod för alla webbläsare, inga tillägg
• What Can My Font Do?: ladda upp typsnittsfilen, tjänsten avkodar även ett omdöpt typsnitt

Metodjämförelse: tabell

1. Fontanello, typsnitt i snabbmenyn

Fontanello, ett tillägg som lägger till typsnittsnamnet direkt i webbläsarens snabbmeny. Markera text, högerklicka, välj Fontanello, så ser du inte bara typsnittsfamiljen utan även vikt, storlek, teckenmellanrum och färg. Inga extra paneler, inget behov av att aktivera verktyget i verktygsfältet.

Tillägget fungerar i Chrome, Firefox, Edge och på iOS. Detta är den snabbaste metoden av alla som finns: bokstavligen en åtgärd. Inget behov av att föra muspekaren någonstans, inget behov av att växla mellan flikar i DevTools, högerklicka så är svaret mitt framför dig.

Fördelar:

• En åtgärd: högerklicka och resultat i snabbmenyn
• Stöd för fyra plattformar: Chrome, Firefox, Edge, iOS
• Visar ytterligare attribut: storlek, färg, teckenmellanrum

Nackdelar:

• Identifierar inte omdöpta typsnitt
• Sparar inte historik över hittade typsnitt

Fontanello, valet för den som värdesätter snabbhet. Ett klick, ingen aktivering, inga extra rörelser.

🔗 Fontanello i Chrome Web Store

2. WhatFont, för muspekaren och ta reda på

WhatFont, ett av de mest populära tilläggen för typsnittsidentifiering: tre miljoner användare och betyget 4,0 i Chrome Web Store. Principen är enkel: klicka på WhatFont-ikonen i verktygsfältet, för muspekaren över text, så visas en panel över sidan med fullständig information om typsnittet.

Till skillnad från Fontanello låter WhatFont dig markera flera textfragment samtidigt och jämföra typsnitt visuellt. Tillägget visar typsnittsfamilj, vikt, storlek, radhöjd och färg. Ett separat plus, det identifierar typsnittets leveranskälla: Google Fonts API, Adobe Fonts (tidigare Typekit) eller lokal @font-face.

Fördelar:

• Tre miljoner användare, stabilt och beprövat tillägg
• Visar typsnittsleverantör: Google Fonts, Adobe Fonts, lokal
• Fungerar i Chrome och Safari

Nackdelar:

• Kräver klick på ikonen för aktivering, en extra åtgärd jämfört med Fontanello
• Ingen version för Firefox

🔗 WhatFont i Chrome Web Store

3. Fonts Ninja, designerns schweiziska armékniv

Fonts Ninja gick längre än enkel typsnittsidentifiering. Utöver namnet och CSS-egenskaperna visar tillägget: hur många stilar som är tillgängliga för det hittade typsnittet, namnet på stilgjuteriet, licenspris och, vad som är särskilt värdefullt, en lista över liknande typsnitt.

Det inbyggda bokmärkessystemet sparar designers timmar. Hittade ett intressant typsnitt på någon annans webbplats, sparade det i samlingen direkt från tillägget och delade senare listan med teamet. Sökning fungerar efter glyfform, licenstyp och pris, praktiskt när du behöver ett budgetalternativ till ett dyrt typsnitt.

Tillägget används av 900 tusen personer, betyg 4,4. Fungerar endast i Chrome för närvarande. Storleksmässigt är det tyngre än WhatFont, 2 MB mot 741 KB, men funktionaliteten motiverar det.

Fördelar:

• Visar typsnittspris, stilgjuteri och liknande alternativ
• Inbyggda bokmärken för hittade typsnitt
• Sökning efter glyfform och licenstyp

Nackdelar:

• Endast Chrome, inga versioner för Safari och Firefox
• Tyngre än alternativen: 2 MB mot 741 KB för WhatFont

🔗 Fonts Ninja i Chrome Web Store

4. Inbyggd inspektör, universell metod utan tillägg

När du inte vill installera tillägg eller arbetar i en webbläsare där de inte finns, har varje modern webbläsare ett inbyggt verktyg för typsnittsidentifiering. Detta är långsammare än tillägg men kräver ingen installation alls.

Google Chrome. Högerklicka på texten och välj "Inspektera". Panelen DevTools öppnas. På fliken Stilar hittar du egenskapen font-family, den listar alla typsnitt som tillämpas på elementet. Det första i listan är det som renderas just nu.

Firefox. Firefox har en dedikerad "Typsnitt"-flik i inspektören. Högerklicka → "Inspektera element" → gå till fliken Typsnitt. Du ser inte bara typsnittsnamnet utan även dess vikt, storlek och till och med en glyfförhandsvisning, inget tillägg har detta.

Safari. Aktivera först menyn "Utvecklare": Safari → Inställningar → Avancerat → kryssa i "Visa utvecklarmeny i menyraden". Högerklicka nu på text → "Inspektera element". I sidofältet väljer du "Stilar, Beräknat" och hittar avsnittet font-family.

Fördelar:

• Inget att installera, inbyggt i varje webbläsare
• Firefox visar glyfförhandsvisning på fliken Typsnitt
• Fungerar för alla element, inte bara text

Nackdelar:

• Långsammare än tillägg: 10-30 sekunder mot omedelbart resultat
• Obekvämt för massgranskning av typsnitt på en sida

5. What Can My Font Do?, avkodning av omdöpta typsnitt

Ett allvarligt hinder för alla tillägg och inspektören är ett omdöpt typsnitt. När en utvecklare sätter ihop ett anpassat paket förlorar namnet i font-family kopplingen till originalet: istället för Inter eller Roboto ser du något som custom-font-3742. Tillägg är maktlösa, de läser CSS-egenskapen, inte själva filen.

Lösningen är tjänsten What Can My Font Do?. Algoritmen:

• Genom Chromes inspektör, gå till fliken Applikation → Ramar → Typsnitt. Hitta typsnittsfilen genom att matcha filnamnet med vad du ser i font-family.
• Öppna typsnittsfilen i en ny flik, den laddas ner.
• Dra den nedladdade filen till What Can My Font Do?-fönstret. Tjänsten analyserar binärdatan och visar: det verkliga typsnittsnamnet, stilgjuteri, antal glyfer, språkstöd, licens och alla tecken i tabellform.

Detta är ingen omedelbar metod, den kräver en minut eller två och grundläggande förståelse för DevTools. Men när tillägg misslyckas mot ett omdöpt eller specialmonterat typsnitt är What Can My Font Do? den enda fungerande metoden.

Fördelar:

• Identifierar omdöpta typsnitt genom binär filanalys
• Visar fullständig information: glyfer, språk, licens
• Gratis webbtjänst, ingen installation krävs

Nackdelar:

• Långsam: en till två minuter per typsnitt
• Kräver förståelse för fliken Applikation i DevTools

Video: hur man identifierar ett typsnitt på en minut

Se en steg-för-steg-genomgång av alla fem metoder i aktion, från tillägg till inspektör:

⁉️🤔 Vanliga frågor

Är typsnittstillägg säkra? Samlar de inte in data?

WhatFont, Fontanello och Fonts Ninja samlar inte in personuppgifter och överför inte information om besökta webbplatser. I Chrome Web Store-annonsen för WhatFont anger utvecklaren uttryckligen: tillägget samlar inte in eller använder användardata. Fonts Ninja begär fler behörigheter, men detta är nödvändigt för att bokmärkesfunktionen för typsnitt ska fungera.

Kan man ta reda på ett kommersiellt typsnitt och dess licenspris?

Fonts Ninja är det enda tillägget från listan som visar licenspriset direkt när du för muspekaren över text. För kommersiella projekt sparar detta timmar: inget behov av att söka efter typsnittet separat på MyFonts eller Adobe Fonts för att ta reda på kostnaden.

Vad gör man om typsnittet identifieras men inte kan laddas ner?

Typsnitt på webbplatser är nästan alltid upphovsrättsskyddade. Att ta reda på namnet är lagligt. Att ladda ner och använda utan licens är det inte. Om typsnittet är kommersiellt (till exempel från Linotype- eller Monotype-katalogen), köp en licens på stilgjuteriets webbplats. Gratis typsnitt finns oftast på Google Fonts, de kan användas fritt i vilket projekt som helst.

Varför visar Firefox typsnittet men inte Chrome?

Detta händer när ett typsnitt är anslutet via @font-face med olika format: WOFF2 för Chrome, WOFF för äldre versioner av Firefox. Om typsnittet inte visas i Chrome, kontrollera DevTools-konsolen på fliken Konsol: kanske blockeras typsnittsfilen av CORS-policy eller laddades inte på grund av en annonsblockerare.

Vilken metod bör en frontend-utvecklare välja, och vilken bör en designer välja?

För en frontend-utvecklare är den inbyggda inspektören bekvämare, den är redan öppen i arbetsflödet, inget behov av att växla. För en designer, Fonts Ninja: visar pris, alternativ och låter dig bokmärka fynd för framtida projekt. För engångskontroller "vilket typsnitt är detta?" ta Fontanello, ett klick och svaret är mitt framför dig.

Vilket verktyg för typsnittsidentifiering ska man välja?

Det bästa valet beror på uppgiften. Om du är frontend-utvecklare och inspektören redan är öppen, stanna i den, fliken Typsnitt i Firefox ger mer information än något tillägg. Om du är designer som söker referenser, installera Fonts Ninja för bokmärkena, priserna och liknande typsnitt. För snabba kontroller är Fontanello snabbhetskungen: högerklicka och klart.

Och när inget tillägg klarar det, omdöpt typsnitt, specialbygge, hemmagjort paket, ladda upp filen till What Can My Font Do? typsnittsanalystjänst. Detta är den sista utvägen som alltid fungerar.