Jak użyć własnej czcionki na stronie (najpierw ją przetestuj)

Żeby użyć własnej czcionki na stronie, wgrywasz plik czcionki na swoją stronę, regułą @font-face mówisz CSS, gdzie on leży, a potem używasz jej przez font-family. Zanim zrobisz cokolwiek z tego, możesz przetestować czcionkę na swoich prawdziwych stronach: darmowym rozszerzeniem FontMee ładujesz plik .woff2, .ttf lub .otf ze swojego komputera i widzisz go na dowolnej stronie jednym kliknięciem, nic nie zmieniając i niczego nie wgrywając.

Czym jest własna czcionka

Własna czcionka to po prostu plik czcionki, który nie jest ani jedną z czcionek, które ma każdy komputer, ani jedną z darmowych czcionek z Google Fonts. Może to być czcionka marki od projektanta, kupiona albo zrobiona przez ciebie. Zwykle to plik kończący się na .woff2, .woff, .ttf lub .otf. Nie masz jeszcze pliku? Nasz przewodnik o dodawaniu Google Fonts opisuje darmowe.

Dla stron internetowych najlepszy jest .woff2: jest mały, więc strony ładują się szybciej, a czytają go wszystkie aktualne przeglądarki. .ttf i .otf to formaty używane na komputerze. W przeglądarkach też działają, ale pliki są większe. Jeśli masz tylko .ttf lub .otf, do testów to w zupełności wystarczy.

Krok 1: Najpierw przetestuj na prawdziwej stronie

Wgrywanie czcionki i pisanie kodu tylko po to, by odkryć, że ci się nie podoba, zabiera całe popołudnie. FontMee to darmowe rozszerzenie Chrome, mały dodatek, który daje przeglądarce jedną nową funkcję, i pozwala najpierw wypróbować czcionki na żywej stronie. Przyjmuje też twoje własne pliki. Krótki film pokazuje panel.

1. Zainstaluj FontMee. Dodaj je ze Sklepu Chrome. Jest darmowe i nie wymaga konta. Kliknij ikonę puzzla w Chrome i przypnij rozszerzenie, żeby zawsze było o jedno kliknięcie.
2. Otwórz jedną ze stron swojej witryny i kliknij ikonę FontMee. Panel otworzy się obok strony. Możesz też nacisnąć Alt + Shift + F. Własnych stron Chrome (Nowa karta, Sklep, strony chrome://) nie da się zmienić.
3. Naciśnij Wgraj i wybierz plik czcionki. Możesz wybrać kilka plików naraz, każdy do 6 MB. FontMee nazywa czcionkę według pliku, więc my_brand_sans.woff2 staje się my brand sans.
4. Znajdź ją w Moje czcionki. Twoje wgrane pliki mają własny filtr i są oznaczone jako Twoja. Najedź na jedną, żeby zmienić nazwę ołówkiem albo usunąć ją koszem.
5. Kliknij czcionkę, żeby ją wypróbować. Pod Zastosuj zmiany do wybierz Wszystko, Nagłówki lub Tekst. Użyj Dostrój do rozmiaru, grubości i interlinii, a między Oryginalna czcionka i Podgląd FontMee przełączaj się, żeby porównać.
6. Wpisz własne słowa. W polu tekstu próbnego wpisz prawdziwy nagłówek, imię albo zdanie ze swoimi znakami specjalnymi, żeby zobaczyć, jak czcionka sobie z nimi radzi.

Pliki twojej czcionki zostają w twojej przeglądarce, na twoim komputerze. Nic nie jest wgrywane, a test zmienia tylko to, co widzisz ty, więc nikt inny niczego nie zauważy. Chcesz pokazać wynik klientowi? FontMee potrafi zrobić obraz przed i po: oto jak.

Krok 2: Umieść plik czcionki na swojej stronie

Gdy ci się spodoba, czcionka musi mieszkać na twojej stronie, bo przeglądarki odwiedzających mogą ładować tylko pliki, które są w internecie, a nie na twoim komputerze. Utwórz folder o nazwie fonts i wgraj do niego plik, tak jak wgrywasz obrazy: przez menedżer plików hostingu, przez FTP albo przez wgrywanie czcionek, które może oferować twój kreator stron. Folder mógłby wyglądać tak:

your-website/
  index.html
  style.css
  fonts/
    my-brand-sans.woff2
    my-brand-sans.ttf

Używaj prostych nazw plików, małymi literami i bez spacji (my-brand-sans.woff2, a nie My Brand Sans (1).woff2). To omija klasyczną przyczynę problemu „moja czcionka się nie wyświetla”.

Krok 3: Powiedz CSS o czcionce

Teraz piszesz dwie małe rzeczy w swoim CSS, czyli regułach mówiących stronie, jak ma wyglądać. Najpierw blok @font-face, który mówi „jest czcionka o tej nazwie, a jej plik leży tutaj”. Potem zwykła reguła, która jej używa.

@font-face {
  font-family: 'My Brand Sans';
  src: url('/fonts/my-brand-sans.woff2') format('woff2'),
       url('/fonts/my-brand-sans.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'My Brand Sans', sans-serif;
}

h1, h2 {
  font-family: 'My Brand Sans', serif;
}

Prostymi słowami: font-family w pierwszym bloku to nazwa, którą sam wymyślasz. src to miejsce pliku, a druga linijka to zapas w .ttf dla starszych przeglądarek. font-display: swap pokazuje twój tekst w czcionce zastępczej, dopóki nie dotrze prawdziwa, żeby odwiedzający nigdy nie patrzyli na puste miejsce. W regułach na dole słowo po przecinku (sans-serif) to ta czcionka zastępcza i dobrze jest zawsze ją dodawać.

Wstaw ten CSS tam, gdzie twoja strona trzyma style: do style.css, w WordPressie w Wygląd, Dostosuj, Dodatkowy CSS albo do pola własnego CSS w kreatorze stron. Jeśli twój plik leży w innym folderze, zmień ścieżkę w url().

Skrót: niech FontMee to napisze

Wróć do FontMee i naciśnij Kopiuj CSS. Dla wgranej czcionki FontMee pisze twoje reguły i dodaje komentarz z linijką @font-face na start. Zmień nazwę i rozszerzenie pliku, jeśli twoje są inne, na przykład na .ttf. Wolisz mieć wszystko gotowe? Naciśnij Pobierz ZIP do własnego hostingu. Dostajesz folder z plikiem czcionki w fonts, fonts.css z blokiem @font-face, fontmee.css z twoimi regułami i krótkie README. Wgraj folder, podłącz dwa arkusze stylów i gotowe.

Cztery rzeczy do sprawdzenia przed publikacją

• Sprawdź licencję. Plik czcionki na twoim komputerze nie jest automatycznie wolny do umieszczenia na stronie. Wiele licencji obejmuje tylko użycie na komputerze i ma osobną licencję internetową. FontMee przypomina o tym komunikatem „twój własny plik: sprawdź licencję przed publikacją”. W razie wątpliwości zapytaj, skąd masz czcionkę.
• Sprawdź swoje litery. W polu próbnym wpisz słowa z polskimi znakami (ą, ę, ł, ś, ż, ó). Czcionka może wyglądać idealnie i mimo to nie mieć niektórych liter, które wtedy pojawią się w czcionce zastępczej.
• Zachowaj czcionkę zastępczą. Kończ każde font-family słowem serif lub sans-serif, żeby tekst wyglądał dobrze, gdy czcionka się ładuje.
• Niech będzie lekko. Jeden lub dwa pliki czcionek w zupełności wystarczą. Każdy dodatkowy plik trochę obciąża stronę, więc wybieraj .woff2, gdy możesz.

Nie masz jeszcze strony? Wtedy czcionka jest na drugim miejscu. Strona potrzebuje też domu, w którym zamieszka, a kreator stron to najszybszy sposób, żeby go mieć bez kodu.

Zdobądź rozszerzenie

FontMee jest darmowe, z ponad 1900 czcionkami, kopiowaniem CSS w czterech formatach, ZIP-em do własnego hostingu i wgrywaniem własnych czcionek. Bez konta, bez subskrypcji. Dodaj je ze Sklepu Chrome albo najpierw przeczytaj stronę FontMee.

Warto wiedzieć, zanim zaczniesz

FAQ