Znajdowanie czcionek w Chrome & Firefox DevTools

DevTools przeglądarki pozwala sprawdzić dokładną czcionkę renderowaną na dowolnym elemencie. Oto jak ich używać - i kiedy skaner URL jest szybszym wyborem.

Chrome DevTools - Renderowane czcionki

  1. 1Kliknij prawym przyciskiem myszy dowolny tekst i wybierz Zbadaj (lub naciśnij Ctrl+Shift+I / Cmd+Option+I).
    Menu kontekstowe Chrome z opcją Zbadaj zaznaczoną na niebiesko
    Zobacz pełny zrzut ekranu
    Kliknij prawym przyciskiem tekst, następnie kliknij Zbadaj
  2. 2Chrome otwiera panel Elementy z klikniętym elementem już zaznaczonym w drzewie DOM.
  3. 3W prawym panelu kliknij zakładkę Obliczone (druga zakładka, obok Stylów).
  4. 4Przewiń za właściwości CSS do sekcji Renderowane czcionki.
    Zakładka Obliczone Chrome DevTools pokazująca Renderowane czcionki: Inter Variable z pliku woff2
    Zobacz pełny zrzut ekranu
    Zakładka Obliczone - przewiń do "Renderowane czcionki", aby zobaczyć aktywny krój pisma
  5. 5Widzisz dokładny krój pisma użyty przez przeglądarkę, plik źródłowy i liczbę wyrenderowanych glifów.

Firefox DevTools - Zakładka Czcionki

  1. 1Kliknij prawym przyciskiem myszy dowolny tekst i wybierz Zbadaj (lub naciśnij F12). Otwiera się panel Inspektor.
  2. 2W prawym panelu Inspektora (gdzie normalnie widzisz Reguły i Obliczone) kliknij zakładkę Czcionki.
  3. 3Lewa kolumna wyświetla wszystkie czcionki załadowane na stronie. Kliknij nazwę czcionki, aby zobaczyć próbkę, zakres wagi, format i URL źródłowy.
    Zakładka Czcionki Firefox DevTools - Inter Variable zaznaczona z próbką i szczegółami
    Zobacz pełny zrzut ekranu
    Zakładka Czcionki Firefox - wszystkie czcionki strony wymienione po lewej, szczegóły po prawej

Ograniczenia podejścia DevTools

DevTools świetnie sprawdza się przy inspekcji pojedynczych elementów, ale nie daje pełnego inwentarza wszystkich czcionek załadowanych przez stronę. Dla pełnego audytu - wklej URL poniżej.

Szybciej: skanuj całą stronę po URL

Wklej dowolny URL i uzyskaj pełną listę wszystkich użytych czcionek webowych - każdą regułę @font-face, import Google Fonts i link CDN - w jednym skanowaniu.

Często zadawane pytania

Co to są "Renderowane czcionki" w Chrome?

Renderowane czcionki pokazuje rzeczywisty krój pisma użyty przez przeglądarkę do narysowania wybranego tekstu - po zastosowaniu awaryjnych wartości font-family. Może różnić się od deklaracji CSS font-family.

Dlaczego renderowana czcionka różni się od font-family w CSS?

font-family to priorytetowa lista czcionek zapasowych. Jeśli pierwsza czcionka nie ładuje się, przeglądarka przechodzi do kolejnej. Renderowane czcionki pokazuje to, co zostało użyte.

Czy mogę znaleźć wszystkie czcionki na stronie za pomocą DevTools?

Zakładka Czcionki Firefoksa pokazuje wszystkie załadowane czcionki. Chrome wymaga sprawdzania elementów jeden po drugim. Dla pełnego inwentarza użyj skanera URL powyżej.

Czy skaner URL wykrywa też Google Fonts?

Tak - wykrywane są wszystkie źródła czcionek: Google Fonts, Bunny Fonts, Fontshare i samodzielnie hostowane czcionki @font-face.

Powrót do sprawdzarki czcionek