Fontti ei ole vain "kauniita kirjaimia". Se ohjaa huomiota, luo tunnelmaa ja vaikuttaa suoraan luettavuuteen. Huono fontti karkottaa kävijät sivustolta sekunneissa, vaikka sisältö olisi erinomaista.

Joskus vierailet verkkosivustolla ja huomaat, että teksti näyttää arvokkaalta ja tyylikkäältä. Haluat selvittää, mitä fonttia siinä käytetään, joko omaa projektia varten tai puhtaasta ammatillisesta uteliaisuudesta. Sivustojen omistajat eivät kuitenkaan merkitse typografiaansa, ja jotkut nimeävät fontteja tarkoituksella uudelleen CSS:ssä vaikeuttaakseen tunnistamista.

Hyviä uutisia: fontin tunnistaminen miltä tahansa verkkosivustolta on mahdollista. Sinun ei tarvitse olla front-end-kehittäjä tai suunnittelija; kolme lähestymistapaa kattaa käytännössä kaikki tilanteet. Selaimen sisäänrakennetusta tarkastustyökalusta yhden klikkauksen laajennuksiin ja palveluihin, jotka on tarkoitettu kuvissa oleville fonteille.

💡 Nopea yleiskatsaus:

• Avaa DevTools (F12) ja etsi font-family Computed-välilehdeltä

• Asenna Whatfont tai Fontanello ja vie kursori tekstin päälle

• Lataa kuvakaappaus Font Squirrel Matcheratoriin tai WhatTheFontiin

1. Selaimen sisäänrakennettu tarkastustyökalu

Kaikkein helpoiten saavutettava menetelmä, joka ei vaadi minkäänlaista asennusta. Jokainen moderni selain (Chrome, Firefox, Edge, Safari) sisältää kehittäjätyökalut (DevTools). Niiden joukossa on tarkastustyökalu, joka näyttää CSS-ominaisuudet miltä tahansa sivun elementiltä, mukaan lukien fontin.

Näin avaat sen. Windowsissa paina Ctrl + Shift + I; Macissa Cmd + Shift + I. Tai napsauta tekstiä hiiren kakkospainikkeella ja valitse "Tutki" / "Näytä koodi". DevTools-paneeli avautuu.

Paneelin vasemmalla puolella näet HTML-rakenteen; oikealla CSS-säännöt. Nopein reitti fonttiin on kuitenkin Computed-välilehden kautta. Selaa ominaisuuslistaa kohtaan font-family; tämä on kirjasimen nimi. Sen vieressä selain näyttää sivulla renderöitävän fonttitiedoston.

On myös vaihtoehtoinen reitti niille, jotka haluavat nähdä kaikki sivuston fontit kerralla. Avaa Chrome DevToolsissa Application-välilehti → Frames-osio → Fonts-kansio. Selain näyttää listan kaikista ladatuista fonttitiedostoista URL-osoitteineen ja muotoineen (woff2, ttf). Se on hitaampi, mutta paljastaa sen, mikä on piilotettu @font-face-säännössä.

Hyvät puolet: ilmainen, ei vaadi laajennuksia, näyttää tarkan fontin nimen ja sen tyylin (leikkaus, paksuus, koko). Huonot puolet: vaatii useita klikkauksia; menetelmä ei toimi mobiililaitteilla.

2. Selainlaajennukset

Jos tarkistat fontteja usein, laajennus säästää sinulta tunteja. Periaate on yksinkertainen: viet kursorin tekstin päälle, ja laajennus näyttää fontin nimen ja sen CSS-parametrit työkaluvihjeessä.

2.1 Whatfont

Suosituin ratkaisu tällä alueella. Wiredin, Lifehackerin ja SwissMissin suosittelema. Asennus Chrome Web Storesta vie yhden klikkauksen.

Asennuksen jälkeen klikkaa laajennuksen kuvaketta selaimen oikeassa yläkulmassa aktivoidaksesi tunnistustilan. Nyt kun viet kursorin minkä tahansa tekstin päälle, Whatfont näyttää kirjasimen suoraan kursorin yläpuolella. Tekstiä klikkaamalla paljastuu koko kortti: kirjasinperhe, paksuus, koko, rivikorkeus ja väri.

Laajennus toimii myös Firefoxilla ja Safarilla (porttauksen kautta). Ilmainen, ei vaadi rekisteröitymistä, avointa lähdekoodia GitHubissa.

🔗 Whatfont Chrome Web Storessa

2.2 Fontanello

Kun Whatfont näyttää tiedot hiirellä osoitettaessa, Fontanello toimii hiiren kakkospainikkeella. Valitse tekstiä sivustolta, paina hiiren kakkospainiketta ja valitse Fontanello kontekstivalikosta. Esiin tulee paneeli, jossa on kaikki tiedot: fontin nimi, lihavuus, koko, väri ja jopa tekstin kontrastisuhde taustaan nähden (saavutettavuuskriteeri).

Fontanello on saatavilla Chromeen ja Firefoxiin. Lisäbonuksena laajennus ei kuormita sivua jatkuvalla seurannalla; se aktivoituu vain, kun pyydät sitä.

🔗 Fontanello Chrome Web Storessa

2.3 Fonts Ninja

Tehokkaampi työkalu, jossa on "fontin DNA" -ominaisuus: oma algoritmi, joka analysoi kirjasintiedostoja tarkempien tulosten saamiseksi. Sen lisäksi, että Fonts Ninja tunnistaa fontit hiirellä osoitettaessa, se osaa myös kirjanmerkitä löydetyt fontit ja näyttää yhteenvedon kaikista sivulla käytetyistä kirjasintyypeistä.

Yksi varaus: kirjanmerkit ja jotkin ominaisuudet vaativat rekisteröitymisen. Mutta fonttien perustunnistus toimii ilman tiliä. Laajennus on maksullinen (kokeilujaksolla), joten sitä kannattaa harkita, jos työskentelet typografian parissa ammattimaisesti.

🔗 Fonts Ninja Chrome Web Storessa

3. Miten tunnistaa fontti kuvasta

Tarkastustyökalu ja laajennukset ovat voimattomia, kun fontti on osa kuvaa: logo, banneri tai meemi. Teksti kuvassa ei ole HTML-elementti, joten sillä ei ole CSS-ominaisuuksia. Tällaisia tapauksia varten on olemassa erikoistuneita palveluita.

3.1 Font Squirrel Matcherator

Ilmainen työkalu Font Squirrelilta, vuosien saatossa hyväksi todettu. Näin se toimii:

• Lataa kuvakaappaus tai tekstikatkelma Matcherator-käyttöliittymään
• Valitse kirjaimet sisältävä alue (sininen merkintäväline työkalupalkissa)
• Klikkaa "Matcherate It!"

Palvelu analysoi kirjainmuodot ja palauttaa listan lähimmistä vastineista tietokannastaan. Jos tarkkaa vastinetta ei löydy, se ehdottaa visuaalisesti samankaltaisia vaihtoehtoja samankaltaisuusprosentilla varustettuna. Se toimii jopa käsin kirjoitettujen fonttien kanssa, kunhan kirjaimet eivät kosketa toisiaan.

🔗 Font Squirrel Matcherator

3.2 WhatTheFont by MyFonts

WhatTheFont hyödyntää syväoppimista ja yli 233 000 fontin tietokantaa. Lataa kuva, klikkaa haluttua kirjainta, ja algoritmi löytää vastaavuudet. Sen tärkein etu Matcheratoriin verrattuna: WhatTheFont käsittelee sidotut kirjaimet, joissa merkit sulautuvat toisiinsa. Tämä on merkittävä tekninen ominaisuus, joka vanhemmilta palveluilta puuttuu.

Parhaan tuloksen saat lataamalla vaakasuuntaista tekstiä, jossa on hyvä resoluutio ja kontrastinen tausta.

🔗 WhatTheFont MyFontsissa

Video: fontin tunnistaminen minuutissa

Lyhyt esittely siitä, miten Identify Font -laajennus asennetaan ja miten fontti löydetään miltä tahansa verkkosivulta avaamatta DevToolsia:

⁉️🤔 Usein kysytyt kysymykset

Voiko fontin tunnistaa mobiilisivustolta?

Kyllä, mutta rajoituksin. Selainlaajennukset eivät ole käytettävissä mobiiliselaimissa, eivätkä DevTools-työkalutkaan. Toimiva tapa: ota puhelimellasi kuvakaappaus tekstistä ja lähetä se WhatTheFontiin tai Font Squirrel Matcheratoriin tietokoneen kautta. Jos sivuston teksti on suurta ja selkeää, palvelu tunnistaa kirjaintyypin kuvakaappauksesta yhtä hyvin kuin työpöytäkuvasta.

Entä jos sivuston ylläpitäjä on nimennyt fontin uudelleen CSS:ssä?

Jotkut kehittäjät muuttavat font-family-ominaisuuden tyyleissä mielivaltaiseksi nimeksi, vaikka he itse asiassa lataavat tiettyä fonttitiedostoa. Tässä tapauksessa DevTools-menetelmä Application-välilehden kautta (Frames → Fonts) näyttää todelliset fonttitiedostojen URL-osoitteet. Tiedostonimestä (esimerkiksi Inter-Regular.woff2) voit helposti tunnistaa kirjaintyypin. Myös "DNA-analyysia" käyttävät laajennukset, kuten Fonts Ninja, ohittavat uudelleennimeämisen analysoimalla itse tiedostoa CSS-ominaisuuden sijaan.

Mikä menetelmä on tarkin?

Sivulla olevalle tekstille: Whatfont- tai Fontanello-laajennus; yksi hiirellä osoitus, ja sinulla on tarkka nimi. Kuville: WhatTheFont neuroverkkomoottorillaan on Matcheratoria tarkempi yhteenliitettyjen ja koristeellisten fonttien kohdalla. Täydelliseen varmuuteen uudelleennimetyn CSS:n kanssa: DevTools → Application → Fonts, josta näet todellisen fonttitiedoston URL-osoitteen; virhe on tässä mahdoton.

Täytyykö fonttien tunnistamisesta maksaa?

Ei. Kaikki tässä artikkelissa mainitut menetelmät ovat ilmaisia. DevTools on sisäänrakennettu selaimeen. Whatfont ja Fontanello ovat ilmaisia, avoimen lähdekoodin laajennuksia. Font Squirrel Matcherator on ilmainen verkkopalvelu. WhatTheFont on ilmainen (sen ansaintamalli perustuu fonttimyyntiin, ei tunnistukseen). Fonts Ninjassa on maksullinen versio, mutta fonttien perustunnistus toimii ilman maksua.

Voiko löydetyn fontin ottaa automaattisesti käyttöön omalla sivustolla?

Teknisesti kyllä, mutta juridisesti se riippuu fontin lisenssistä. Voit tunnistaa kirjaintyypin vapaasti. Voit kuitenkin käyttää sitä omalla sivustollasi vain, jos fontilla on avoin lisenssi (SIL Open Font License, Apache 2.0) tai olet hankkinut kaupallisen lisenssin. Google Fonts, Font Squirrel ja Adobe Fonts ovat turvallisia lähteitä, joilla on selkeät käyttöehdot.

Mikä fontintunnistusmenetelmä kannattaa valita

Jos lähestyt tätä kysymystä ensimmäistä kertaa, aloita DevToolsista. Se on ilmainen, vie 30 sekuntia eikä vaadi asennusta. Säännölliseen typografiatyöskentelyyn asenna Whatfont: yksi hiirellä osoitus neljän klikkauksen sijaan.

Kun fontti on piilotettu kuvaan, lähetä kuvakaappaus WhatTheFontiin. Se on teknologisesti edistynein ilmainen kuvapohjainen hakupalvelu. Ja jos kirjaintyyppi on nimetty uudelleen CSS:ssä, tavoita tiedosto Application → Fonts -reitin kautta DevToolsissa: tämä polku paljastaa totuuden kehittäjien kikoista riippumatta.

Muista: fontin löytäminen ei ole vaikeaa. Vaikeampaa on sen oikea soveltaminen. Tarkista lisenssi, testaa luettavuutta oikealla sisällöllä äläkä sekoita kahta kirjaintyyppiä enempää yhdessä projektissa. Hyvä typografia ei huuda, se toimii.