FontLens

Besplatno proširenje za Chrome

Koji je ovo font? Desni klik i pogledajte CSS

Odaberite tekst na bilo kojoj web-stranici, kliknite desnom tipkom i odaberite "Inspect font with FontLens". Otvorit će se inspektor fontova s obitelji, veličinom, debljinom, proredom i bojom, CSS-om spremnim za kopiranje te gumbom za preuzimanje fonta.

Dodaj u Chrome — besplatno

Radi i u preglednicima Edge, Brave, Opera i drugim Chromium preglednicima.

FontLensov inspektor: uzorak Ag između vodilica za visinu velikih i malih slova te osnovnu liniju, svojstva fonta i Tailwind isječak

Ukratko

Što radi
Prikazuje font odabranog teksta: obitelj, veličinu, debljinu, prored, boju i druge stilove koji se razlikuju od zadanih, uz CSS spreman za kopiranje.
Kako početi
Odaberite tekst, kliknite desnom tipkom i izaberite "Inspect font with FontLens". Stavka izbornika prikazuje se samo kad je tekst odabran.
Kopiranje u
CSS, SCSS, SASS ili Tailwind, uz veličinu u px, rem, pt ili em.
Datoteka fonta
Download font preuzima web-font iz izvora @font-face. Prije upotrebe provjerite licencu fonta.
Za koga je
Za web-dizajnere, front-end programere, stručnjake za pristupačnost i studente koji uče CSS.
Cijena
Besplatno. Bez računa i plaćene verzije.
Podaci
Radi u vašem pregledniku. Bez poslužitelja i analitike. Jedini zahtjev šalje se kad pokrenete preuzimanje fonta.
Radi u
Chromeu i drugim Chromium preglednicima koji instaliraju iz Chrome Web Storea. Ne radi u Firefoxu ni Safariju.
Ograničenja
Čita CSS pravog teksta na web-stranicama. Ne čita tekst na slikama, platnima ni u PDF-ovima, kao ni na Chromeovim stranicama.
Verzija
2.2.0, ažurirano 23. listopada 2026.

Do fonta u dva klika

  1. 1

    Odaberite tekst

    Naslov, odlomak ili tekst gumba na bilo kojoj web-stranici.

  2. 2

    Kliknite desnom tipkom

    Odaberite "Inspect font with FontLens". Inspektor se otvara preko stranice s obitelji, veličinom, debljinom, proredom i bojom.

  3. 3

    Kopirajte ili prilagodite

    Kopirajte CSS ili Tailwind, isprobajte drugu veličinu ili boju u pregledu uživo ili preuzmite datoteku fonta.

Zašto ga ljudi otvaraju

Aa

Otkrijte naziv fonta

Sviđa vam se neki naslov? Odaberite ga i saznajte obitelj, debljinu i izvor fonta: Google Fonts, Adobe Fonts ili sama stranica.

{ }

Uskladite maketu

Usporedite vrijednosti na stranici uživo s dizajnerskom datotekom, a zatim kopirajte pravila kao CSS, SCSS, SASS ili Tailwind.

4.5:1

Provjerite kontrast

Pogledajte omjer kontrasta i oznake AA i AAA. Prije objave dizajna isprobajte tamniji tekst ili svjetliju pozadinu.

Što radi

  • Uzorak s vodilicama

    Prva obitelj iz niza prikazana je između vodilica za visinu velikih i malih slova te osnovnu liniju, izmjerenih iz samog fonta.

  • formata isječaka

    CSS, SCSS, SASS i Tailwind. Kopirajte cijeli isječak ili jedan redak; posljednji odabrani format ostaje zapamćen.

  • Vaše jedinice

    Prikažite veličinu u px, rem, pt ili em u poljima i isječku. rem prati osnovnu veličinu stranice.

  • Izvor fonta

    Oznaka prikazuje izvor fonta: Google Fonts, Adobe Fonts, vlastiti poslužitelj ili sistemski font na vašem računalu.

  • Provjera kontrasta

    Omjer teksta i pozadine s oznakama AA i AAA za običan i velik tekst ažurira se dok mijenjate boje.

  • Download font

    Preuzima datoteku iz izvora @font-face i imenuje je po obitelji fonta. Ako poslužitelj blokira preuzimanje, izvor se otvara u novoj kartici.

Zašto DevTools sporo otkriva koji je ovo font

Stranica navodi popis fontova, a preglednik koristi prvi koji ima. Da biste saznali koji je to, otvorite DevTools, pronađite element, pročitajte ploču Computed pa potražite datoteku fonta na ploči Network. Veličina, debljina, prored i boja nalaze se na različitim mjestima.

FontLens čita izračunati stil odabranog teksta i prikazuje ga na jednoj ploči: niz obitelji, uzorak prve obitelji, vrijednosti, izvor fonta i CSS. Čita CSS stranice pa ne može imenovati font na slici.

Ništa ne napušta vaš preglednik

  • Bez računa i poslužitelja

    FontLens radi u vašem pregledniku. Bez analitike i praćenja.

  • Čita odabrani tekst

    Inspektor čita stilove teksta na koji ste kliknuli desnom tipkom. Podaci o stranici ne šalju se nikamo.

  • Četiri dopuštenja

    Kontekstni izbornik za stavku desnog klika, aktivna kartica i pristup stranici za otvaranje inspektora te pohrana uzorka teksta, jedinice i formata isječka.

Chrome DevTools i FontLens

Chrome DevTools i FontLensChrome DevToolsFontLens
Pronaći font tekstaPregledati, pronaći element i otvoriti ComputedOdabrati tekst, desni klik, jedna stavka izbornika
Kopirati u Tailwind ili SCSSNe, vrijednosti kopirate jednu po jednuKartica CSS, SCSS, SASS ili Tailwind
Pronaći izvor fontaTražiti datoteku fonta na ploči NetworkOznaka: Google Fonts, Adobe Fonts, vlastiti poslužitelj ili sustav
Preuzeti datoteku fontaPronaći je u Networku ili Sources i spremitiJedan gumb
Provjeriti kontrastU biraču boja na ploči StylesOznake AA i AAA uz pregled uživo
CijenaUgrađenoBesplatno

Pitanja

Kako saznati koji font koristi web-stranica?

Dodajte FontLens u Chrome, odaberite tekst na stranici, kliknite desnom tipkom i izaberite "Inspect font with FontLens". Vidjet ćete obitelj, veličinu, debljinu, prored, boju i izvor fonta.

Kako kopirati CSS fonta s web-stranice?

U inspektoru odaberite karticu CSS, SCSS, SASS ili Tailwind i pritisnite "Copy all" ili kopirajte jedan redak. Po potrebi prvo promijenite jedinicu na px, rem, pt ili em.

Mogu li preuzeti font s web-stranice?

Ako tekst koristi web-font, "Download font" preuzima datoteku iz izvora @font-face. Sistemski font nema datoteku za preuzimanje. Prije upotrebe u projektu provjerite licencu.

Može li FontLens prepoznati font na slici ili u PDF-u?

Ne. Čita CSS pravog teksta na web-stranicama pa ne može imenovati fontove na slikama, platnima ni u PDF-ovima.

Kako provjeriti kontrast teksta prema WCAG-u?

Pregled prikazuje omjer kontrasta teksta i pozadine uz oznake AA i AAA za običan i velik tekst. Promijenite bilo koju boju i oznake će se ažurirati.

Može li prikazati veličine u rem umjesto px?

Da. Promijenite jedinicu na px, rem, pt ili em; polja i isječak pratit će odabir. rem se računa prema osnovnoj veličini fonta stranice, a vaš izbor ostaje zapamćen.

Je li besplatan? Prikuplja li podatke?

Besplatan je i ne traži račun. Nema poslužitelja ni analitike; jedini zahtjev pokreće preuzimanje fonta koje sami započnete.

Radi li u Edge, Brave ili Opera pregledniku?

Većina Chromium preglednika instalira proširenja iz Chrome Web Storea, uključujući Edge, Brave, Opera i Vivaldi. Firefox i Safari nisu podržani.

Više besplatnih ekstenzija od PYROCTAL

Koji je to font? Dva klika.

Dodaj u Chrome — besplatno