Olet nähnyt sen tapahtuvan: selaat sivustoa ja yhtäkkiä pysähdyt. Otsikon fontti on niin hyvä, että kuvittelet jo, miltä se näyttäisi omassa projektissasi. Mutta mikä sen nimi on? Sivuston omistaja ei vastannut, lähdekoodissa on hämärrettyä CSS-koodia, ja "kiva serif-fontti jossa on outo G-kirjain" -tyyppinen googlaus voi viedä aamuun asti.

Suunnittelijat lankeavat tähän ansaan jatkuvasti. Gigatavukaupalla kokoelmia läpikäyminen toivoen osumaa on arpapeliä. Ja entä jos fonttia ei ole siellä lainkaan?

Onneksi vuosi 2026 antaa meille joukon työkaluja, jotka ratkaisevat ongelman sekunneissa. Jotkin toimivat ladattujen kuvien kanssa, toiset suoraan live-sivuilla. Käymme läpi 9 tapaa tunnistaa fontti: klassisista palveluista kirjanmerkkeihin, jotka painavat nolla megatavua.

💡 Pikakatsaus:

• Lataa kuvakaappaus tekstistä WhatTheFontiin tai WhatFontIsiin, niin saat fontin nimen (usein ilmaisen vaihtoehdon kera).
• Asenna Fonts Ninja- tai WhatFont-laajennus, vie kursori sivuston tekstin päälle ja näet nimen, koon, rivikorkeuden ja värin.
• Jos sinulla ei ole edes kuvakaappausta, avaa Identifont, vastaa 5-10 kysymykseen kirjainmuodoista ja saat osuman.
• Kun löydät fontin, lataa se sivustolle CSS @font-face -säännöllä (tai WordPress-lisäosalla) ja ota se käyttöön.

Verkkopalvelut: fonttien tunnistaminen ladatuista kuvista

Nämä neljä työkalua toimivat yhtenäisellä periaatteella: annat niille kuvan, jossa on tekstiä, ja ne ajavat sen satojentuhansien fonttien tietokannan läpi ja palauttavat osumia.

1. WhatTheFont, MyFontsin kultainen standardi

MyFontsin WhatTheFont on tarkin fontintunnistin vuonna 2026. Konepellin alla syväoppiminen, joka perustuu yli 233 000 fonttityylin tietokantaan. Lataa kuva, klikkaa tekstiä, saat listan osumista. Tietokanta painottuu kaupallisiin fontteihin, mutta tarjoaa lähes aina myös ilmaisia vaihtoehtoja.

Plussat: erinomainen tarkkuus standardityypeillä, mobiilisovellus iOS:lle ja Androidille, ei vaadi rekisteröitymistä. Miinukset: heikko käsinkirjoitetuilla ja voimakkaasti tyylitellyillä fonteilla, sisäänrakennettu rajaustyökalu leikkaa toisinaan ylä- ja alapidennykset pois.

🔗 WhatTheFont MyFontsissa

2. WhatFontIs, suurin tietokanta (yli 900 000 fonttia)

WhatFontIs ylläpitää suurinta tietokantaa, yli 900 000 fonttia. Aja se toisena, jos WhatTheFont ei antanut varmaa tulosta.

Pääominaisuus: automaattinen ilmaisten vaihtoehtojen valinta Google Fontsista maksullisille osumille. Verkkoprojektin budjetin kannalta tämä säästää tunnin työaikaa.

Plussat: suurin indeksi, ehdotuksia ilmaisista vaihtoehdoista, selainlaajennus. Miinukset: ilmaisversio on täynnä mainoksia, symbolit täytyy merkitä manuaalisesti ennen hakua.

🔗 WhatFontIs

3. Fontspring Matcherator, tarkkuus OpenType-fonttien kanssa

Fontspring Matcherator on riippumattomia fonttivalimoita käyttävien suunnittelijoiden suosikki. Toisin kuin WhatTheFont (MyFonts-katalogi), Matcherator kattaa indie-fontit, tunnistaa OpenType-ominaisuudet (ligatuurit, vaihtoehtoiset kirjasinmuodot) ja tukee raahaa ja pudota -toimintoa.

Plussat: ilmainen, vahva web-fonttien kanssa, rinnakkainen vertailu. Miinukset: tietokanta pienempi kuin MyFontsilla, herkkä kuvanlaadulle.

🔗 Fontspring Matcherator

4. Font Squirrel, ilmaiset fontit ja nolla mainosta

Font Squirrel rakensi maineensa kuratoimalla ilmaisia fontteja kaupalliseen käyttöön. Sen Matcherator on kaikkein pelkistetyin: lataa, rajaa, saat tulokset. Ei mainoksia, ei ponnahdusikkunoita. Tunnusomainen ominaisuus on kuvan kääntö: jos fontti on vinossa, Font Squirrel hoitaa sen siinä missä muut epäonnistuvat.

Plussat: selkein käyttöliittymä, ilmaiset fontit, nopeat tulokset. Miinukset: tietokanta on pieni, lähes koskaan ei löydä kaupallisia fontteja.

🔗 Font Squirrel Matcherator

Selainlaajennukset: fonttien tunnistaminen suoraan sivustoilta

Verkkopalvelut ovat hyviä kuville. Mutta jos fontti on edessäsi juuri nyt, elävällä verkkosivulla, selainlaajennukset antavat vastauksen sekunneissa. Ei kuvakaappauksia, ei uusia välilehtiä.

5. Fonts Ninja, kokeile, osta, lataa

Fonts Ninja (entinen FontFaceNinja) on kiistaton ykkönen selaimen fonttitunnistimien joukossa. Laajennus on saatavilla Chromeen, Firefoxiin, Safariin ja Edgeen.

Vie kursori tekstin päälle, niin näet fontin nimen, koon, rivikorkeuden, värin ja kirjainvälin. Mutta tärkeintä on, että Fonts Ninja antaa sinun kokeilla fonttia: kirjoita omaa tekstiäsi ja näet sen reaaliajassa samalla fontilla. Ja jos pidät siitä, lataat heti ilmaisversion tai siirryt ostamaan kaupallisen version.

Bonus: maskipainike, joka piilottaa kaikki mainokset ja kuvat sivulta jättäen jäljelle vain typografian puhtaassa muodossaan. Ulkoasua arvioivalle suunnittelijalle tämä on korvaamatonta.

Plussat: kattava kokonaisuus, tunnista, kokeile, lataa; toimii neljässä selaimessa. Miinukset: edistyneitä suodattimia (kirjainmuodot, lisenssityyppi) varten tarvitset rekisteröitymisen.

🔗 Fonts Ninja Chrome Web Storessa

6. WhatFont, vie kursori ja opi kaikki

WhatFont on Wiredin suosittelema ja verkkokehittäjien yksinkertaisuudestaan rakastama laajennus. Saatavilla Chromeen ja Firefoxiin.

Vie kursori tekstin päälle, fontin nimi ponnahtaa esiin. Klikkaa, niin saat täydellisen kartan CSS-ominaisuuksista: family, weight, size, line height, color HEX-muodossa. Tämä ei ole pelkkä tunnistin, vaan typografiatarkastaja. Jos fontti on Google Fonts -katalogista, WhatFont antaa suoran latauslinkin.

Plussat: välitön tulos, syvällinen CSS-analyysi, linkit Google Fontsiin. Miinukset: ei tunnista fontteja kuvista (vain sivun elävä teksti), ei anna kokeilla fonttia omalla tekstillä.

🔗 WhatFont Chrome Web Storessa

7. Typ.io, fonttiparituksia ja inspiraatiota

Typ.io ratkaisee tehtävän askeleen pidemmälle: ei riitä, että tunnistat fontin, haluat ymmärtää, minkä kanssa se toimii parina. Laajennuksen asentamisen jälkeen selaimen kulmaan ilmestyy "T"-painike. Klikkaa sitä, niin näet kaikki sivun fontit erillisenä listana. Klikkaa nimeä, niin siirryt fonttikortille, jossa on paritusesimerkkejä: "tätä fonttia käytetään yhdessä..."

Itse Typ.io-sivusto on tietokanta todellisista suunnitteluratkaisuista: yhteisö lataa kuvakaappauksia sivustoista ja erittelee niiden fonttiyhdistelmät. Niille, jotka eivät halua vain löytää fonttia, vaan ymmärtää sen käyttökontekstin.

Plussat: fonttiparitusten valinta, tietokanta todellisista esimerkeistä. Miinukset: laajennus näyttää vain fonttien nimet (ilman CSS-yksityiskohtia), täysi toiminnallisuus vaatii rekisteröitymisen.

🔗 Typ.io

8. Fount, kirjanmerkki joka ei paina mitään

Fount ei ole laajennus, vaan kirjanmerkki. Lisäät painikkeen selaimesi kirjanmerkkeihin, siirryt miltä tahansa sivustolle, klikkaat tätä kirjanmerkkiä, ja kursori muuttuu tähtäimeksi. Klikkaa tekstiä, niin esiin tulee ikkuna, jossa näkyvät fontin nimi, koko, paino ja tyyli. Klikkaa kirjanmerkkiä uudelleen poistaaksesi tilan käytöstä.

Ihanteellinen valinta niille, jotka eivät halua täyttää selaintaan laajennuksilla. Toimii Safarissa, Chromessa, Firefoxissa ja IE8+:ssa. Ei vaadi päivityksiä, ei kerää tietoja, ei käytä taustaprosesseja. Se vain toimii.

Plussat: erittäin kevyt, alustariippumaton, ei mitään asennettavaa. Miinukset: tunnistaa vain sen, mikä todella renderöityi fonttipinossa (ei sitä, mitä CSS:ssä on tarkoitettu), ei yksityiskohtia kuten väriä.

🔗 Fount, lisää bookmarklet

Erikoismenetelmä: kun kuvaa tai sivustoa ei ole

9. Identifont, fonttien tunnistaminen kuvailemalla

Identifont on tämän kokoelman vanhin työkalu (vuodesta 2000), mutta yhä korvaamaton. Se ei hyväksy kuvia eikä skannaa sivustoja. Sen sijaan se kysyy kysymyksiä: onko Q-kirjaimessa päätteitä? Ovatko pienaakkosen "g" lenkit yhteydessä toisiinsa? Miltä "&"-merkki näyttää?

Vastaat 5-10 kysymykseen, Identifont rajaa joukkoa ja antaa osuman. Kuulostaa vanhanaikaiselta, mutta se on ainoa toimiva menetelmä silloin, kun sinulla ei ole kuvakaappausta eikä URL-osoitetta, vaan ainoastaan muistikuva fontin ulkonäöstä.

Hyvää: toimii täysin ilman kuvaa, harjaannuttaa typografista silmää. Huonoa: hidas (haku vie yli 5 minuuttia), sivuston ulkoasua ei ole päivitetty vuosikymmeniin, tietokanta häviää moderneille palveluille.

🔗 Identifont

Vertailutaulukko: mitä valita

Täydellistä yksittäistä työkalua ei ole. Ammattilaisen tapa: lataa kuva WhatTheFontiin, toinen kierros Fontspring Matcheratoriin ja katso leikkauskohta. Se nimi, joka toistuu, on totuus.

Miten löydetty fontti lisätään sivustolle

Tunnistit fontin, latasit tiedoston, nyt se pitää lisätä sivustolle. Yleispätevin tapa on @font-face.

Vaihe 1. Lataa fontti .ttf- tai .otf-muodossa.

Vaihe 2. Muunna se verkkomuotoihin Font Squirrel Webfont Generatorilla. Tuloksena saat .woff-, .woff2- ja .ttf-tiedostot sekä valmiin CSS-tiedoston. WOFF2 on verkon pääformaatti vuonna 2026, ja sitä tukee 98% selaimista.

Vaihe 3. Siirrä fonttitiedostot palvelimelle FTP:n tai hotellin tiedostonhallinnan kautta kansioon /wp-content/themes/your-theme/fonts/.

Vaihe 4. Kirjoita CSS:ään @font-face:

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
}

font-display: swap -määritys on kriittinen: selain näyttää ensin järjestelmäfontin, ja kun oma fontti latautuu, se vaihtaa sen tilalle. Ilman sitä teksti on näkymätöntä, kunnes fontti on latautunut.

Vaihe 5. Ota fontti käyttöön elementeissä:

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

WordPress: Custom Fonts -lisäosa tarjoaa visuaalisen käyttöliittymän fonttien lataamiseen. Tai kirjoita @font-face lapsiteeman functions.php-tiedostoon wp_head-koukun kautta.

Ennen kuin muokkaat mitään teematiedostoja, tee varmuuskopio. Virhe @font-face-säännössä tai functions.php-tiedostossa voi kaataa sivuston.

Katso lyhyt video, joka näyttää koko prosessin kuvankaappauksesta valmiiseen fontin nimeen WhatTheFontin avulla:

⁉️🤔 Usein kysytyt kysymykset

Miksi WhatTheFont ei löydä fonttiani?

Kolme pääsyytä: huono kuvanlaatu, teksti on vinossa kulmassa tai fontti on käsinkirjoitettu. Ota suurempi kuvankaappaus, kontrastisella taustalla ja vaakasuorassa. Jos ei auta, kokeile Fontspring Matcheratoria ja WhatFontIsia. Käsinkirjoitetuille fonteille tarkkaa vastinetta ei usein ole olemassakaan: ne ovat ainutlaatuisia.

Voiko fontin tunnistaa PDF-tiedostosta?

Kyllä, jos tekstiä ei ole rasteroitu. Avaa PDF, valitse teksti ja ota kuvankaappaus. Lataa se mihin tahansa neljästä ensimmäisestä palvelusta. Skannauksissa tulos riippuu resoluutiosta: 150 DPI ja siitä ylöspäin antaa hyväksyttävän tarkkuuden.

Fontti tunnistettiin, mutta se on maksullinen. Mistä saan ilmaisen vaihtoehdon?

WhatFontIs tarjoaa automaattisesti ilmaisia vaihtoehtoja Google Fontsista jokaisen maksullisen osuman kohdalla. Manuaalisesti: mene osoitteeseen fonts.google.com, kirjoita löydetyn fontin nimi ja katso visuaalisesti samankaltaisia. Ilmaisia korvaajia: päätteelliset, Playfair Display, Lora, Merriweather; päätteettömät, Inter, Roboto, Manrope.

Mitä fonttimuotoa verkossa kannattaa käyttää vuonna 2026?

WOFF2 on päämuoto, WOFF on varavaihtoehto vanhemmille selaimille. TTF:ää ja OTF:ää ei pitäisi käyttää verkossa: ne painavat 2-3 kertaa enemmän ilman pakkausta. Font Squirrel -generaattori (mainittu yllä) muuntaa kaiken WOFF2+WOFF-muotoon yhdellä klikkauksella.

Mitä käyttää vuonna 2026: lopullinen yhteenveto

Yhdeksän työkalua ei tarkoita, että sinun pitää käyttää niitä kaikkia. Tässä on yksinkertainen valintamatriisi:

• On kuvankaappaus → WhatTheFont, sitten Fontspring Matcherator tarkistukseen.
• Tarvitset ilmaisen vaihtoehdon → WhatFontIs (automaattinen valinta Google Fontsista).
• Fontti on live-sivustolla → Fonts Ninja tai WhatFont (laajennus viidessä sekunnissa).
• Ei mitään saatavilla, vain muistikuva → Identifont.
• Et halua asentaa laajennuksia → Fount (kirjanmerkki kirjanmerkeissä).

Ja jos mikään työkalu ei toiminut, avaa DevTools (F12 → Inspect → Computed → font-family). Epämukavaa, mutta luotettavaa. Eikä kukaan ole kumonnut r/identifythisfont-subredditiä: live-suunnittelijat nimeävät fontin parissa minuutissa.

Hyvä fontti muuttaa sivuston vaikutelman nopeammin kuin kolmen lohkon asettelu uusiksi. Nyt sinulla on kaikki, mitä tarvitset löytääksesi sen oikean ja laittaaksesi sen projektiisi.