Jaki font (czcionka) został użyty na stronie?

Czas czytania: 3 minut

Zastanawiałeś się kiedyś po wejściu na jakąś stronę jakiego kroju fontu (czcionki elektronicznej) na niej użyto.

Zapewne spotkało cię to już nieraz w końcu obecnie istnieje wiele ciekawych fontów, które można spotkać na stronach. W brew pozorom ustalenie jaki to krój czcionki nie jest w cale trudne – powiedziała bym, że jest bardzo proste. Nie musisz też specjalnie instalować jakiś aplikacji.

Jak sprawdzić nazwę fonta z pomocą narzędzi dla developera?

Na początek uruchamiamy przeglądarkę internetową np. Google Chrome lub Firefox. Następnie otwieramy w niej witrynę, na której chcemy sprawdzić krój czcionki.

Teraz klikamy prawym klawiszem myszy w tekst z interesującą nas czcionką. W nowo wyświetlonym panelu wybieramy opcje „ZBADAJ”.

krój fontu, czcionki, narzędzia developera w Google Chrome
krój fontu, czcionki

W nowo otwartym panelu zobaczycie teraz kilka kolumn zawierających różne informacje o stronie (np. kod strony, błędy w witrynie).

Kod HTML strony z zaznaczonym sprawdzanym elementem
Kod HTML strony z zaznaczonym sprawdzanym elementem

Nas jednak interesuje pole mieszczące się po prawej stronie.

prawy panel z stylami CSS
prawy panel z stylami CSS

W polu tym powinny znajdować się informacje os stylach CSS dotyczących sprawdzanego przez nas elementu.

rozszerzony panel z nazwą fontu
rozszerzony panel

Teraz przechodzimy do zakładki panelu Computed (druga zakładka po Styles). To co zobaczymy będzie przypominać to co znajduje się na obrazku powyżej.

Dla wygody rozciągnęłam to pole, ale nie trzeba tego robić. Jeżeli panel jest wystarczająco duży.

Jak widać nazwy właściwości są tutaj uporządkowane alfabetycznie, i zgodnie z tą zasadą szukamy parametru o nazwie „font-family„.

font-family jakiej użyto w witrynie
font-family

W tym momencie można już zobaczyć, że na omawianej stronie użyto czcionki „Oswald”. Klikając na umieszczoną z boku strzałkę możemy uzyskać nieco więcej informacji.

więcej szczegółów co to kroju pisama
więcej szczegółów

Dodatkowo informacja o foncie znajduje się również na samym dole tego panelu:

nazwa kroju fontu użytego w przykładzie
nazwa kroju fontu

Jak widać sprawdzenie jakiego kroju jest font nie było trudne – trzeba było jedynie wiedzieć gdzie to sprawdzić.

Jak zamknąć panel?

W celu zamknięcia panelu klikamy na krzyżyk w górnym prawym rogu lub klikamy F12 na klawiaturze komputera.

Dodatkowe uwagi

Po prawej stronie znajduje się przycisk z trzema kropkami – mieści  się  tam informacja o położeniu panelu – najprościej ustawić ją tak jak na obrazku.

położenie panelu
położenie panelu

Jak sprawdzić krój tekstu z pomocą wtyczki dodawanej do przeglądarki?

Inną opcją jeśli nie czujecie się na siłach jest zainstalowanie w przeglądarce wtyczki np. WhatFont, Fontface Ninja.

Oczywiście i w tym przypadku nauka was nie ominie. Jednak prawdopodobnie szybciej uzyskacie informację na temat wykorzystywanego kroju pisma.

Dodatkowe tagi:
jaka czcionka, jaki font została użyta na przeglądanej witrynie www