Selatessasi verkkosivuja törmäät siihen yhtäkkiä. Täydellinen fontti, jota olet etsinyt viikkoja. Pienaakkosen "a":n koristeellinen muoto ja mittasuhteet saavat sisäisen typografisi kiljumaan riemusta. Mutta nimi? Sivuston tekijä ei ole merkinnyt sitä, CSS:n kaivelu vie aikaa, ja suunnittelijan tuki on lomalla.

Fontti ruudulla on CSS-ominaisuus, ei kuva. Selain antaa rehellisesti nimen, painon, koon ja jopa valimon jokaiselle, joka tietää mistä katsoa. Viime vuosina fonttien tunnistustyökalut ovat kehittyneet DevTools-välilehdestä laajennuksiksi, jotka näyttävät lisenssihinnat, ehdottavat ilmaisia vaihtoehtoja ja tallentavat löydöt kokoelmaan.

Tässä oppaassa viisi menetelmää: pikaisesta (hiiren oikea painike) edistyneeseen (fontin binääritiedoston analysointi). Mikään ei vaadi muotoilijan tutkintoa tai maksullista tilausta.

💡 Pikakatsaus:

• Fontanello: oikea hiiren painike, ja fontin nimi on valmiina kontekstivalikossa (Chrome, Firefox, Edge, iOS)
• WhatFont: vie kursori tekstin päälle, näet fonttiperheen, koon, värin ja jakelupalvelun (Chrome, Safari)
• Fonts Ninja: tunnistaa fontin, näyttää hinnan, tallentaa löydöt kirjanmerkkeihin (Chrome)
• Sisäänrakennettu tarkastaja: yleispätevä menetelmä kaikkiin selaimiin, ei laajennuksia
• What Can My Font Do?: lataa fonttitiedosto, palvelu purkaa jopa uudelleennimetyn fontin tiedot

Menetelmien vertailu: taulukko

1. Fontanello, fontti kontekstivalikossa

Fontanello on laajennus, joka lisää fontin nimen suoraan selaimen kontekstivalikkoon. Maalaa teksti, napsauta oikealla, valitse Fontanello, ja näet fonttiperheen lisäksi painon, koon, kirjainvälin ja värin. Ei ylimääräisiä paneeleita, ei tarvetta aktivoida työkalua työkalupalkista.

Laajennus toimii Chromessa, Firefoxissa, Edgessä ja iOS:ssä. Tämä on nopein kaikista olemassa olevista menetelmistä: kirjaimellisesti yksi toimenpide. Kursoria ei tarvitse viedä minnekään, ei tarvitse vaihdella DevTools-välilehtiä, oikea hiiren painike ja vastaus on suoraan edessäsi.

Hyvät puolet:

• Yksi toimenpide: oikea hiiren painike ja tulos kontekstivalikossa
• Tukee neljää alustaa: Chrome, Firefox, Edge, iOS
• Näyttää lisäattribuutit: koko, väri, kirjainväli

Huonot puolet:

• Ei tunnista uudelleennimettyjä fontteja
• Ei tallenna löydettyjen fonttien historiaa

Fontanello on valinta niille, jotka arvostavat nopeutta. Yksi napsautus, ei aktivointia, ei ylimääräisiä liikkeitä.

🔗 Fontanello Chrome Web Storessa

2. WhatFont, vie kursori päälle ja ota selvää

WhatFont on yksi suosituimmista fonttien tunnistuslaajennuksista: kolme miljoonaa käyttäjää ja arvosana 4,0 Chrome Web Storessa. Periaate on yksinkertainen: napsauta WhatFont-kuvaketta työkalupalkissa, vie kursori tekstin päälle, ja sivun päälle ilmestyy paneeli, jossa on täydelliset tiedot fontista.

Toisin kuin Fontanello, WhatFont antaa sinun korostaa useita tekstikatkelmia samanaikaisesti ja vertailla fontteja visuaalisesti. Laajennus näyttää fonttiperheen, painon, koon, rivikorkeuden ja värin. Erillinen plussa on se, että se tunnistaa fontin jakelulähteen: Google Fonts API, Adobe Fonts (entinen Typekit) tai paikallinen @font-face.

Hyvät puolet:

• Kolme miljoonaa käyttäjää, vakaa ja testattu laajennus
• Näyttää fontin jakelupalvelun: Google Fonts, Adobe Fonts, paikallinen
• Toimii Chromessa ja Safarissa

Huonot puolet:

• Vaatii kuvakkeen napsauttamista aktivointiin, ylimääräinen toimenpide verrattuna Fontanelloon
• Ei versiota Firefoxille

🔗 WhatFont Chrome Web Storessa

3. Fonts Ninja, suunnittelijan linkkuveitsi

Fonts Ninja meni yksinkertaista fontin tunnistusta pidemmälle. Nimen ja CSS-ominaisuuksien lisäksi laajennus näyttää: kuinka monta leikkausta löydetylle fontille on saatavilla, valmistajan nimen, lisenssihinnan ja, mikä on erityisen arvokasta, listan samankaltaisista fonteista.

Sisäänrakennettu kirjanmerkkiominaisuus säästää suunnittelijoilta tunteja. Löysit kiinnostavan fontin toisen sivustolta, tallensit sen kokoelmaan suoraan laajennuksesta ja jaoit listan myöhemmin tiimin kanssa. Haku toimii merkkimuodon, lisenssityypin ja hinnan perusteella, kätevää kun tarvitset budjettivaihtoehdon kalliille fontille.

Laajennusta käyttää 900 tuhatta ihmistä, arvosana 4,4. Toimii toistaiseksi vain Chromessa. Kooltaan se on WhatFontia raskaampi, 2 Mt vs. 741 Kt, mutta toiminnallisuus oikeuttaa sen.

Hyvät puolet:

• Näyttää fontin hinnan, valimon ja samankaltaiset vaihtoehdot
• Sisäänrakennetut kirjanmerkit löydetyille fonteille
• Haku merkkimuodon ja lisenssityypin mukaan

Huonot puolet:

• Vain Chrome, ei versioita Safarille ja Firefoxille
• Raskaampi kuin vaihtoehdot: 2 Mt vs. 741 Kt WhatFontilla

🔗 Fonts Ninja Chrome Web Storessa

4. Sisäänrakennettu tarkastaja, yleispätevä menetelmä ilman laajennuksia

Kun et halua asentaa laajennuksia tai työskentelet selaimella, jolle niitä ei ole, jokaisessa modernissa selaimessa on sisäänrakennettu työkalu fontin tunnistukseen. Tämä on laajennuksia hitaampi, mutta ei vaadi lainkaan asennusta.

Google Chrome. Napsauta tekstiä oikealla ja valitse "Tutki". DevTools-paneeli avautuu. Styles-välilehdeltä etsi font-family-ominaisuus, se listaa kaikki elementtiin sovelletut fontit. Listan ensimmäinen on se, joka nyt renderöidään.

Firefox. Firefoxissa on erillinen "Fontit"-välilehti tarkastajassa. Oikea hiiren painike → "Tutki elementtiä" → siirry Fontit-välilehdelle. Näet fontin nimen lisäksi sen painon, koon ja jopa merkkien esikatselun, mitä missään laajennuksessa ei ole.

Safari. Ota ensin käyttöön "Kehitys"-valikko: Safari → Asetukset → Lisäasetukset → valitse "Näytä Kehitys-valikko valikkorivillä". Napsauta nyt tekstiä oikealla → "Tutki elementtiä". Valitse sivupalkista "Tyylit, lasketut" ja etsi font-family-osio.

Hyvät puolet:

• Ei asennettavaa, sisäänrakennettu jokaiseen selaimeen
• Firefox näyttää merkkien esikatselun Fontit-välilehdellä
• Toimii mille tahansa elementille, ei vain tekstille

Huonot puolet:

• Hitaampi kuin laajennukset: 10-30 sekuntia vs. välitön tulos
• Epäkäytännöllinen fonttien massatarkasteluun sivulla

5. What Can My Font Do?, uudelleennimettyjen fonttien purku

Vakava este kaikille laajennuksille ja tarkastajalle on uudelleennimetty fontti. Kun kehittäjä kokoaa mukautetun paketin, font-family-nimi menettää yhteyden alkuperäiseen: Inter- tai Roboto-nimen sijaan näet jotain kuten custom-font-3742. Laajennukset ovat voimattomia, ne lukevat CSS-ominaisuutta, eivät itse tiedostoa.

Ratkaisu on What Can My Font Do? -palvelu. Algoritmi:

• Mene Chromen tarkastajan kautta Application → Frames → Fonts -välilehdelle. Etsi fonttitiedosto täsmäämällä tiedostonimi siihen, mitä näet font-family-kohdassa.
• Avaa fonttitiedosto uudessa välilehdessä, se latautuu.
• Vedä ladattu tiedosto What Can My Font Do? -ikkunaan. Palvelu analysoi binääridatan ja näyttää: fontin oikean nimen, valimon, merkkien määrän, kielituen, lisenssin ja kaikki merkit taulukkomuodossa.

Tämä ei ole pikamenetelmä, se vaatii minuutin tai kaksi ja DevToolsin perusymmärrystä. Mutta kun laajennukset epäonnistuvat uudelleennimetyn tai mukautetusti kootun fontin kohdalla, What Can My Font Do? on ainoa toimiva menetelmä.

Hyvät puolet:

• Tunnistaa uudelleennimetyt fontit binääritiedoston analyysillä
• Näyttää täydelliset tiedot: merkit, kielet, lisenssi
• Ilmainen verkkopalvelu, ei vaadi asennusta

Huonot puolet:

• Hidas: yhdestä kahteen minuuttia per fontti
• Vaatii DevToolsin Application-välilehden ymmärtämistä

Video: kuinka tunnistaa fontti minuutissa

Katso vaiheittainen opastusvideo kaikista viidestä menetelmästä käytännössä, laajennuksista tarkastajaan:

⁉️🤔 Usein kysytyt kysymykset

Ovatko fonttilaajennukset turvallisia? Keräävätkö ne tietoja?

WhatFont, Fontanello ja Fonts Ninja eivät kerää henkilötietoja eivätkä välitä tietoja vierailluista sivustoista. WhatFontin Chrome Web Store -listauksessa kehittäjä toteaa nimenomaisesti: laajennus ei kerää tai käytä käyttäjätietoja. Fonts Ninja pyytää enemmän käyttöoikeuksia, mutta tämä on välttämätöntä fonttien kirjanmerkkitoiminnon toimimiseksi.

Voiko kaupallisen fontin ja sen lisenssihinnan selvittää?

Fonts Ninja on listan ainoa laajennus, joka näyttää lisenssihinnan suoraan tekstiä osoitettaessa. Kaupallisissa projekteissa tämä säästää tunteja: fonttia ei tarvitse etsiä erikseen MyFontsista tai Adobe Fontsista hinnan selvittämiseksi.

Mitä tehdä, jos fontti tunnistetaan, mutta sitä ei voi ladata?

Verkkosivustojen fontit ovat lähes aina tekijänoikeuden suojaamia. Nimen selvittäminen on laillista. Lataaminen ja käyttö ilman lisenssiä ei ole. Jos fontti on kaupallinen (esimerkiksi Linotypen tai Monotypen katalogista), osta lisenssi valimon verkkosivustolta. Ilmaiset fontit ovat useimmiten Google Fontsissa, niitä voi käyttää vapaasti missä tahansa projektissa.

Miksi Firefox näyttää fontin, mutta Chrome ei?

Näin tapahtuu, kun fontti on liitetty @font-face-säännöllä eri formaateissa: WOFF2 Chromelle, WOFF vanhemmille Firefox-versioille. Jos fontti ei näy Chromessa, tarkista DevToolsin konsoli Console-välilehdeltä: ehkä fonttitiedosto on CORS-käytännön estämä tai se ei latautunut mainosestäjän vuoksi.

Mikä menetelmä frontend-kehittäjän kannattaa valita ja mikä suunnittelijan?

Frontend-kehittäjälle sisäänrakennettu tarkastaja on kätevämpi, se on jo auki työnkulussa, ei tarvitse vaihtaa. Suunnittelijalle Fonts Ninja: näyttää hinnan, vaihtoehdot ja antaa tallentaa löydöt kirjanmerkkeihin tulevia projekteja varten. Kertaluonteisiin "mikä fontti tämä on?" -tarkistuksiin ota Fontanello, yksi napsautus ja vastaus on suoraan edessäsi.

Mikä fontin tunnistustyökalu valita?

Paras valinta riippuu tehtävästä. Jos olet frontend-kehittäjä ja tarkastaja on jo auki, pysy siinä, Firefoxin Fontit-välilehti antaa enemmän tietoa kuin mikään laajennus. Jos olet suunnittelija, joka etsii referenssejä, asenna Fonts Ninja kirjanmerkkejä, hintoja ja samankaltaisia fontteja varten. Nopeisiin tarkistuksiin Fontanello on nopeuskuningas: oikea hiiren painike ja valmista.

Ja kun mikään laajennus ei pysty siihen, uudelleennimetty fontti, mukautettu kooste, kotitekoinen paketti, lataa tiedosto What Can My Font Do? -fonttianalyysipalveluun. Tämä on viimeinen keino, joka toimii aina.