Jak odnaleźć nazwy rodzin czcionek w CSS

Rodziny czcionek określają, które fonty mają być użyte w arkuszach stylów (CSS). Ponieważ wiele czcionek posiada warianty (np. Arial Black, Verdana Bold), projektanci odwołują się do nazwy rodziny – np. Arial, Helvetica czy Verdana – zamiast do konkretnych stylów. Nazwa rodziny jest wspólna dla wszystkich wariantów tej czcionki. Dodatkowo istnieją rodziny ogólne, takie jak sans‑serif czy monospace, które pozwalają przeglądarce wybrać domyślny font o określonym charakterze.

Krok 1

Otwórz folder czcionek systemowych: kliknij przycisk Start, wpisz „fonts” w polu wyszukiwania i naciśnij Enter. Znajdź interesującą Cię czcionkę i zanotuj jej nazwę. Przykładowo, Arial – popularna czcionka Windows – ma wiele wariantów, ale wspólną nazwą rodziny jest „Arial”. Używaj właśnie tej nazwy, a w razie potrzeby możesz podać konkretny wariant, np. „Arial Narrow”. W praktyce zaleca się stosowanie ogólnej rodziny dla większości tekstu w treści strony, a bardziej szczegółowych fontów w nagłówkach.

Krok 2

Dodaj nazwę rodziny ogólnej do swojego font‑stacka. Stosy czcionek to kolejność fontów podawana w CSS, służąca jako zapas, gdy użytkownik nie ma zainstalowanego pierwszego wyboru. Kończ stosy nazwą rodziny ogólnej: użyj serif po czcionkach szeryfowych (np. Georgia, Times New Roman) oraz sans‑serif po czcionkach bezszeryfowych (np. Helvetica, Verdana). Inne ogólne nazwy to monospace, cursive i fantasy. Pamiętaj, że nazwy te nie mają znaczenia, gdy czcionkę wstawiasz przy pomocy @font-face.

Jeśli nazwa rodziny składa się z więcej niż jednego wyrazu, otocz ją cudzysłowami. Jednowyrazowe nazwy (np. Arial, Georgia) nie wymagają cudzysłowów. Można używać pojedynczych (') lub podwójnych (") znaków, ale nie mieszaj ich w tym samym ciągu, aby uniknąć błędów. Przykład poprawnego zapisu:

body { font-family: "Helvetica Neue", Arial, sans-serif; }

W powyższym przykładzie przeglądarka najpierw szuka czcionki Helvetica Neue. Ponieważ nie jest ona dostępna w systemie Windows, użytkownicy tego systemu zobaczą Arial, a pozostali – domyślną czcionkę sans‑serif określoną w ich ustawieniach.

Wskazówka

• Niektórzy znani projektanci, m.in. Paul Irish i Chris Coyier, zalecają rezygnację ze złożonych stosów i używanie jedynie nazw rodzin ogólnych (np. Helvetica, Arial, sans-serif). Dzięki temu szanujemy preferencje użytkowników i oszczędzamy czas, gdyż przeglądarki i tak wybiorą najbardziej dostępne fonty.