Font ei ole lihtsalt „ilusad tähed". See juhib tähelepanu, loob meeleolu ja mõjutab otseselt loetavust. Kehv font peletab külastajad sekunditega saidilt minema, isegi kui sisu on suurepärane.

Vahel külastad veebisaiti ja märkad, et tekst näeb kallis ja stiilne välja. Tahad teada, mis fonti kasutatakse, kas enda projekti jaoks või lihtsalt professionaalsest uudishimust. Kuid saidiomanikud ei märgista oma tüpograafiat ja mõni nimetab fondid CSS-is tahtlikult ümber, et tuvastamist raskendada.

Head uudised: mis tahes veebisaidil kasutatava fondi tuvastamine on võimalik. Sa ei pea olema front-end arendaja ega disainer; kolm lähenemist katavad praktiliselt kõik stsenaariumid. Alates brauseri sisseehitatud inspektorist kuni ühe klõpsuga laienduste ja piltidel olevate fontide tuvastamise teenusteni.

💡 Kiirülevaade:

• Ava DevTools (F12) ja leia Computed vahekaardilt font-family

• Paigalda Whatfont või Fontanello ja liigu hiirega teksti kohale

• Lae ekraanipilt üles Font Squirrel Matcheratorisse või WhatTheFonti

1. Brauseri sisseehitatud inspektor

Kõige kättesaadavam meetod, mis ei nõua mingit installimist. Iga kaasaegne brauser (Chrome, Firefox, Edge, Safari) sisaldab arendajatööriistu (DevTools). Nende hulgas on inspektor, mis kuvab lehe mis tahes elemendi CSS-i atribuudid, sealhulgas fondi.

Kuidas seda avada. Windowsis vajuta Ctrl + Shift + I; Macis Cmd + Shift + I. Või tee tekstil paremklõps ja vali „Inspekteeri" / „Vaata koodi". DevToolsi paneel avaneb.

Paneeli vasakul pool näed HTML-i struktuuri; paremal pool CSS-i reegleid. Kuid kiireim tee fondini on Computed vahekaardi kaudu. Keri atribuutide loendis kuni font-family'ni; see ongi kirjatüübi nimi. Selle kõrval näitab brauser konkreetset fondifaili, mida lehel renderdatakse.

On ka alternatiivne tee neile, kes soovivad näha kõiki saidi fonte korraga. Chrome DevToolsis ava Application vahekaart → Frames sektsioon → Fonts kaust. Brauser kuvab nimekirja kõigist laaditud fondifailidest koos nende URL-i ja formaadiga (woff2, ttf). See on aeglasem, kuid paljastab selle, mis on peidetud @font-face'i.

Plussid: tasuta, ei vaja laiendusi, näitab täpset fondi nime ja selle stiili (paksus, stiil, suurus). Miinused: nõuab mitut klõpsu; meetod ei tööta mobiilseadmetes.

2. Brauseri laiendused

Kui kontrollid fonte sageli, säästab laiendus sulle tunde. Põhimõte on lihtne: liigud hiirega teksti kohale ja laiendus kuvab fondi nime ja selle CSS-i parameetrid vihjes.

2.1 Whatfont

Selle niši kõige populaarsem lahendus. Soovitatud väljaannete Wired, Lifehacker ja SwissMiss poolt. Paigaldamine Chrome Web Store'ist võtab ühe klõpsu.

Pärast paigaldamist klõpsa brauseri paremas ülanurgas laienduse ikooni, et aktiveerida tuvastusrežiim. Nüüd, kui liigud hiirega mis tahes teksti kohale, kuvab Whatfont kirjatüübi otse kursori kohal. Tekstile klõpsamine avab täieliku kaardi: perekond, paksus, suurus, reavahe ja värv.

Laiendus töötab ka Firefoxis ja Safaris (pordi kaudu). Tasuta, registreerimist ei nõuta, avatud lähtekoodiga GitHubis.

🔗 Whatfont Chrome Web Store'is

2.2 Fontanello

Kui Whatfont näitab infot hiirega üle libistades, siis Fontanello töötab paremklõpsuga. Vali saidil tekst, vajuta paremat hiireklahvi ja vali kontekstimenüüst Fontanello. Avaneb paneel täieliku infoga: fondi nimi, paksus, suurus, värv ja isegi teksti kontrastsussuhe tausta suhtes (ligipääsetavuse kriteerium).

Fontanello on saadaval Chrome'ile ja Firefoxile. Lisaboonus: laiendus ei koorma lehte pideva jälgimisega, see aktiveerub ainult siis, kui seda kasutad.

🔗 Fontanello Chrome Web Store'is

2.3 Fonts Ninja

Võimsam tööriist, millel on „fondi DNA" funktsioon: patenteeritud algoritm, mis analüüsib kirjatüübi faile täpsemate tulemuste saamiseks. Lisaks fondi tuvastamisele hiirega üle libistades suudab Fonts Ninja leitud fonte järjehoidjatesse salvestada ja kuvada kokkuvõtet kõigist lehel kasutatud kirjatüüpidest.

On üks aga: järjehoidjad ja mõned funktsioonid nõuavad registreerimist. Kuid fondi põhiline tuvastamine töötab ilma kontota. Laiendus on tasuline (prooviperioodiga), seega tasub seda kaaluda, kui töötad tüpograafiaga professionaalselt.

🔗 Fonts Ninja Chrome Web Store'is

3. Kuidas tuvastada fonti pildilt

Inspektor ja laiendused on jõuetud, kui font on pildi osa: logo, bänner või meem. Pildil olev tekst ei ole HTML-element, mis tähendab, et sellel pole CSS-i omadusi. Sellisteks juhtudeks on olemas spetsiaalsed teenused.

3.1 Font Squirrel Matcherator

Tasuta tööriist Font Squirrelilt, aastatega end tõestanud. Kuidas see töötab:

• Lae ekraanipilt või tekstifragment üles Matcheratori liidesesse
• Vali tähti sisaldav ala (sinine marker tööriistaribal)
• Klõpsa „Matcherate It!"

Teenus analüüsib tähemärkide kuju ja tagastab oma andmebaasist lähimate vastete loendi. Kui täpset vastet pole, pakub see visuaalselt sarnaseid alternatiive koos sarnasusprotsendiga. See töötab isegi käsitsi kirjutatud fontidega, kui tähed ei puutu kokku.

🔗 Font Squirrel Matcherator

3.2 WhatTheFont by MyFonts

WhatTheFont kasutab süvaõpet ja andmebaasi, mis sisaldab üle 233 000 fondi. Laadi üles pilt, klõpsa soovitud tähel ja algoritm leiab vasted. Selle peamine eelis Matcheratori ees: WhatTheFont tuleb toime seotud kirjadega, kus tähed sujuvalt üksteisesse üle lähevad. See on tõsine tehniline võimekus, mis vanematel teenustel puudub.

Parima tulemuse saamiseks laadi üles horisontaalne, hea eraldusvõimega ja kontrastsel taustal tekst.

🔗 WhatTheFont MyFontsis

Video: fondi tuvastamine ühe minutiga

Lühike demonstratsioon, kuidas paigaldada Identify Font laiendus ja leida font ükskõik milliselt veebisaidilt ilma DevToolsi avamata:

⁉️🤔 Korduma kippuvad küsimused

Kas fondi tuvastamine on mobiililehel võimalik?

Jah, kuid piirangutega. Mobiilibrauserites pole laiendused saadaval ja DevTools samuti mitte. Toimiv lähenemine: tee telefonis lehe tekstist ekraanipilt ja laadi see arvuti kaudu üles WhatTheFonti või Font Squirrel Matcheratorisse. Kui tekst on lehel suur ja selge, tuvastab teenus kirjatüübi ekraanipildi järgi sama edukalt kui töölauapildi järgi.

Mis siis, kui saidi omanik on fondi CSS-is ümber nimetanud?

Mõni arendaja muudab stiilides font-family suvaliseks nimeks, kuigi tegelikult laaditakse konkreetset fondifaili. Sel juhul näitab DevTools meetod Application-vahekaardi kaudu (Frames → Fonts) tegelikke fondifailide URL-e. Failinime järgi (näiteks Inter-Regular.woff2) saad kirjatüübi hõlpsasti tuvastada. Laiendused nagu Fonts Ninja koos „DNA-analüüsiga" lähevad samuti ümbernimetamisest mööda, analüüsides faili ennast, mitte CSS-i atribuuti.

Milline meetod on kõige täpsem?

Lehel oleva teksti puhul: Whatfont või Fontanello laiendus; üks hiirega üle libistamine ja sul on täpne nimi. Piltide puhul: WhatTheFont oma närvivõrgu mootoriga on ühendatud ja dekoratiivsete fontide puhul täpsem kui Matcherator. Täieliku kindluse saavutamiseks ümbernimetatud CSS-i korral: DevTools → Application → Fonts, kus näed tegelikku fondifaili URL-i; viga on siin välistatud.

Kas fondi tuvastamise eest tuleb maksta?

Ei. Kõik selles artiklis mainitud meetodid on tasuta. DevTools on brauserisse sisse ehitatud. Whatfont ja Fontanello on avatud lähtekoodiga tasuta laiendused. Font Squirrel Matcherator on tasuta veebiteenus. WhatTheFont on tasuta (monetiseeritakse fondimüügi, mitte tuvastamise kaudu). Fonts Ninja'l on tasuline versioon, kuid põhiline fondituvastus töötab ilma maksmata.

Kas leitud fondi saab automaatselt oma saidile rakendada?

Tehniliselt jah, kuid juriidiliselt sõltub see fondi litsentsist. Kirjatüübi võid vabalt tuvastada. Oma saidil tohid seda aga kasutada ainult siis, kui fondil on avatud litsents (SIL Open Font License, Apache 2.0) või oled ostnud kommertslitsentsi. Google Fonts, Font Squirrel ja Adobe Fonts on turvalised allikad selgete kasutustingimustega.

Milline fondituvastuse meetod valida

Kui lähened sellele küsimusele esimest korda, alusta DevToolsist. See on tasuta, võtab 30 sekundit ega vaja paigaldamist. Regulaarseks tüpograafiatööks paigalda Whatfont: üks hiirega üle libistamine nelja kliki asemel.

Kui font on peidetud pildi sisse, laadi ekraanipilt üles WhatTheFonti. See on tehnoloogiliselt kõige arenenum tasuta pildipõhine otsinguteenus. Ja kui kirjatüüp on CSS-is ümber nimetatud, jõua failini DevToolsis Application → Fonts kaudu: see tee toob tõe päevavalgele sõltumata arendaja trikkidest.

Pea meeles: fondi leidmine pole keeruline. Keerulisem osa on selle õige rakendamine. Kontrolli litsentsi, testi loetavust reaalse sisu peal ja ära sega ühes projektis rohkem kui kahte kirjatüüpi. Hea tüpograafia ei karju, see töötab.