Ang List All Fonts ay nag-scan ng anumang webpage at nagpapakita ng kumpletong listahan ng bawat font family na ginagamit — mga web font na dina-load mula sa mga CDN, self-hosted na font, at system font fallbacks. Ang bawat font ay nagpapakita ng live text preview, ang mga weight at style na dina-load, ang bilang ng mga element na gumagamit nito, at one-click na kopya para sa CSS font-family declaration.
Ang pag-identify ng mga font sa isang website na iyong hinahangaan ay kailangan noon ng isa-isang inspeksyon ng mga element sa DevTools, pagsusuri ng computed font-family property, o paggamit ng mga browser extension na nakaka-detect lamang ng isang font sa isang pagkakataon. Ibinibigay ng List All Fonts ang kumpletong larawan sa isang view — bawat font na dina-load at ginagamit sa pahina, na may live na text sample na nagpapakita kung paano nire-render ang bawat font. Ang tool ay nagtatangi sa pagitan ng mga web font (dina-load via @font-face o Google Fonts) at system font (Arial, Helvetica, Georgia, atbp.), na nagpapakita ng kumpletong font-family stack. Para sa bawat font, makikita mo kung aling mga weight ang dina-load (400, 600, 700), kung aling mga element ang gumagamit nito, at kung anong mga laki ng font ang inilalapat. I-click ang anumang font para kopyahin ang CSS declaration nito — handa nang i-paste sa iyong sariling proyekto. Ang live preview ay gumagamit ng aktwal na font rendering mula sa pahina, hindi isang generic na preview, kaya makikita mo nang eksakto kung paano nagmumukhang ang font sa mga laki at weight na ginagamit sa site.
Inililista ang bawat font-family na aktwal na nire-render sa pahina, kasama ang mga web font mula sa Google Fonts, Adobe Fonts, o custom na @font-face declarations, at system font fallbacks. Ipinapakita ang kabuuang bilang ng natatanging font family na natagpuan.
Ang bawat font ay ipinapakita na may live text sample ("The quick brown fox jumps over the lazy dog") na nire-render gamit ang aktwal na font file na dina-load sa pahina. Makikita mo ang tunay na rendering — hindi isang generic na preview.
Para sa bawat font, tingnan kung aling mga weight ang dina-load (Regular 400, Medium 500, SemiBold 600, Bold 700) at kung available ang mga italic na variant. Tumutulong ito sa pag-unawa ng na-load na subset ng font.
Tingnan kung gaano karaming element sa pahina ang gumagamit ng bawat font. Ang pinaka-ginamit na font ay nakalista muna. Alamin kung aling mga font ang pangunahin (body text) at alin ang pangalawa (ginagamit lamang sa ilang element).
I-click ang anumang font entry para kopyahin ang kumpletong CSS font-family declaration nito (hal., font-family: 'Inter', sans-serif) sa iyong clipboard. Handa nang i-paste direkta sa iyong stylesheet.
Ang bawat font ay nagpapakita ng pinagmulan nito: Google Fonts (kasama ang partikular na URL), Adobe Fonts, self-hosted (kasama ang @font-face URL), o system font. Alamin nang eksakto kung saan nanggagaling ang bawat font.
Bisitahin ang isang website na may magandang typography at agad na makita ang bawat font na ginagamit nito — mga pangalan, weight, at kung saan sila nanggagaling. Wala nang "anong font iyan?" na hula o paggamit ng mga hindi mapagkakatiwalaang font-identification tool.
Ilang font ang dina-load ng iyong pahina? May mga hindi ginagamit na font ba na dina-download ngunit hindi inilalapat? Ang List All Fonts ay nagpapakita ng aktwal na paggamit — kung ang isang dina-load na font ay may 0 element na gumagamit nito, ito ay nasayang na bandwidth.
I-document ang typography ng iyong proyekto sa pamamagitan ng pagpapatakbo ng List All Fonts sa bawat pahina. I-verify na ang tamang mga font at weight ay ginagamit nang konsistente sa buong site — mahuli ang mga rogue na font-family declaration.
Nakakita ng font na gusto mo ngunit bayad ito? Kopyahin ang pangalan ng font at maghanap ng mga libreng alternatibo na may katulad na katangian. Tumutulong ang live preview na matandaan mo nang eksakto kung paano ito nagmukhang.
Patakbuhin ang List All Fonts sa parehong pahina sa iba't ibang browser para ma-verify na ang parehong mga font ay nire-render sa lahat ng dako. Ang mga system font stack ay naiiba ang pag-resolve sa iba't ibang operating system — mahuli ang mga inkonsistensya.
Buksan ang DevSuite Pro floating dock at i-click ang icon ng List All Fonts. Sinu-scan ng tool ang computed styles ng pahina at mga @font-face rules.
Nagpapakita ang isang panel ng lahat ng font na natagpuan sa pahina, na nakaayos ayon sa dalas ng paggamit. Ang bawat entry ay nagpapakita ng pangalan ng font, preview text, mga weight, at bilang ng element.
Mag-scroll sa mga live preview para makita kung paano nire-render ang bawat font. Ikumpara ang heading font ng pahina kumpara sa body font kumpara sa accent font.
I-click ang anumang font entry para kopyahin ang font-family CSS declaration nito. I-click ang source link para bisitahin ang pinagmulan ng font (Google Fonts page, CDN URL, atbp.).
I-paste ang font-family declaration sa iyong CSS at i-load ang font mula sa parehong pinagmulan para magamit ito sa iyong sariling proyekto.
I-install ang DevSuite Pro nang libre at i-unlock ang 39+ developer tools para sa iyong browser.
