Niezależnie od tego, czy tworzysz nowy motyw WordPress, czy po prostu dostosowujesz go, niestandardowe czcionki mogą pomóc odświeżyć styl motywu.

Podczas gdy przeglądarki mają wbudowane czcionki domyślne, które można wywołać w styl.css plik, używając tych samych czcionek, których używają wszyscy inni, może wydawać się nieco nudny.

Na szczęście dodanie własnego wyboru czcionek jest stosunkowo łatwe przy użyciu CSS3 @ font-face zasada. Wystarczy przesłać czcionkę na serwer, a następnie dodać ją do motywu za pomocą kilku małych fragmentów CSS.

Przyjrzyjmy się, jak to zrobić dla Twojego motywu WordPress.

Wyszukiwanie czcionki

Istnieje wiele miejsc, w których można znaleźć świetne czcionki internetowe za darmo, takie jak FontSquirrel lub czcionki Adobe Edge Web. Upewnij się tylko, że wybrana czcionka ma licencję odpowiednią do Twoich potrzeb.

Nie wszystkie darmowe czcionki mogą być używane do celów komercyjnych, ale możesz kupić czcionki premium do użytku komercyjnego z wielu miejsc, takich jak Typekit.

Istnieją również dwa główne rodzaje czcionek: Serif i sans-serif. Czcionki Serif mają loki na krawędziach, podczas gdy czcionki Bezszeryfowe nie.

A letter "S" in a serif font with a hole at the part of the top end that is curled over the edge. The caption reads, "I shot the serif."
Może to pomóc w zapamiętaniu różnicy między tymi dwoma typami czcionek.

Zabawny obraz po lewej stronie może pomóc Ci zapamiętać różnicę między tymi dwoma typami.

Po wybraniu nowej czcionki należy pobrać jej plik. Należy pamiętać, że istnieją różne rodzaje plików czcionek i nie wszystkie są kompatybilne w większości głównych przeglądarek.

Oto krótkie podsumowanie różnych typów czcionek i ich rozszerzeń plików:

  • Czcionka TrueType (TTF) – Kompatybilny z Internet Explorer w wersji 9.0 i nowszych, Chrome OD 4.0, Firefox od 3.5, Safari od 3.1 i Opera od 10.0
  • Czcionka OpenType (OTF) – Ma taką samą kompatybilność przeglądarki jak czcionka TrueType
  • Web Open Font Format (WOFF) – Obsługiwane przez Internet Explorer w wersji 9.0 i powyżej, Chrome od 5.0, Firefox od 3.6, Safari od 5.1 i Opera od 11.1
  • Web Open Font Format 2.0 (WOFF2) – Obsługiwane tylko przez Chrome od wersji 36.0, Firefox od 35.0 i Opera od 26.0
  • Wbudowana czcionka OpenType (EOT) – Dostępne wyłącznie dla przeglądarki Internet Explorer w wersji 6.0 i nowszej.

Format otwartych czcionek internetowych stał się standardem, ponieważ czcionki są kompresowane, aby zużywać mniej przepustowości i zawierać dodatkowe metadane. Niestety, nie zawsze są one dostępne do pobrania.

Jeśli masz problem ze znalezieniem tego rodzaju pliku, czcionki TrueType i OpenType są łatwiej dostępne do pobrania i nadal są świetnym wyborem.

Przesyłanie Czcionki

Po znalezieniu czcionki, której chcesz użyć i wykonaniu instrukcji pobierania pliku ze źródła, nadszedł czas, aby przesłać go na serwer. Zanim to zrobisz, dobrze jest wykonać kopię zapasową całej witryny przed wprowadzeniem jakichkolwiek zmian.

Aby uzyskać szczegółowe informacje na temat tworzenia pełnej kopii zapasowej, sprawdź kilka naszych innych postów: jak wykonać kopię zapasową witryny WordPress (i Multisite) za pomocą migawki i 7 Top Premium i Freemium wtyczki do tworzenia kopii zapasowych WordPress Recenzja.

Najlepiej dodać go do folderu motywu, który znajduje się pod wp-content > themes > your-theme. Możesz opcjonalnie utworzyć folder “czcionki”, aby pomieścić plik, aby zachować porządek, zwłaszcza jeśli planujesz dodać więcej niż jedną czcionkę.

Rozpakuj spakowany plik i prześlij zawartość do folderu motywu.

W cPanel kliknij Menedżer Plików przycisk pod Pliki na stronie głównej. Jeśli otworzy się wyskakujące okienko, wybierz lokalizację witryny, a następnie Idź. guzik. Przejdź do folderu motywu i kliknij Upload przycisk u góry strony.

A screenshot of the "Upload Files" page in cPanel. The upload file path is highlighted.
Powinieneś być w stanie zachować uprawnienia do pliku do 644 i nie napotkać żadnych problemów. Jeśli pojawi się błąd uprawnień, spróbuj usunąć Pliki i przesłać je ponownie z różnymi uprawnieniami.

Kliknij na Wybierz plik przycisk na PRZEŚLIJ PLIKI strona i wybierz pliki czcionek z komputera. Po wybraniu i otwarciu pliki zostaną przesłane automatycznie bez klikania innego przycisku na tej stronie.

Bez względu na to, gdzie umieścisz plik czcionki, musisz zapamiętać jego ścieżkę pliku. Zostanie on wymieniony na tej stronie pogrubioną czcionką po słowach Wybierz pliki do przesłania.

Dodawanie czcionki do motywu

Aby przesłana czcionka rzeczywiście pojawiła się w motywie, musisz wywołać ją w swoim styl.css plik, który znajdziesz pod wp-content > themes > your-theme.

Idealnie jest najpierw utworzyć motyw potomny, aby zmiany nie zostały utracone, gdy motyw pojawi się wraz z aktualizacjami.

Jeśli tworzysz motyw od zera, zwykle nie stanowi to problemu, ale jeśli edytujesz istniejący motyw, możesz sprawdzić kilka naszych innych postów, jak utworzyć motyw potomny WordPress i jak automatycznie tworzyć motywy potomne w WordPress, aby uzyskać szczegółowe informacje na temat tworzenia motywu potomnego.

W cPanel wybierz plik, a następnie kliknij Edycja przycisk u góry strony. Jeśli wcześniej nie wyłączyłeś wyskakujących okienek, pojawi się jedno z nich. Jeśli tak jest, kliknij Idź. na dole.

Skopiuj i wklej poniższy kod do pliku, najlepiej w miejscu, w którym odwołuje się do czcionek. Upewnij się, że między każdym blokiem CSS a wprowadzonym kodem znajduje się podział linii.

Ładowanie gist/511d5069f0b6c111b061

Nie zapomnij wymienić nazwy czcionki na tę, którą przesłałeś i zaktualizować kod, aby odzwierciedlić poprawną ścieżkę pliku.

Dodaj ten sam kod CSS dodatkowo, aby zdefiniować pogrubienie, kursywę, tekst nagłówka i tym podobne, upewniając się, że zaktualizujesz nazwę pliku i ścieżkę, aby odzwierciedlić przeznaczenie czcionki.

Na koniec określ, gdzie twoja czcionka będzie używana z większą liczbą CSS, na przykład w poniższym przykładzie:

Ładowanie gist/aab072f83af07eef4ad1

W tym przykładzie cały tekst akapitu będzie używał nowej (fikcyjnej) czcionki. Po zaktualizowaniu tego kodu do własnych specyfikacji i zapisaniu pliku nowa czcionka będzie widoczna na twojej stronie.

Wniosek

Dzięki tym instrukcjom powinieneś być w stanie dodawać nowe czcionki do motywu bez błędów. Mimo to istnieje wiele wtyczek, które mogą pomóc ci dodawać czcionki bez kodowania, jeśli wolisz łatwiejsze rozwiązanie.

W rzeczywistości wymieniliśmy już najlepsze w naszym poście Najlepsze wtyczki do czcionek niestandardowych WordPress. Jeśli chcesz poręczny przewodnik po wyborze odpowiedniej czcionki, mamy post na to też: większość tego, co” wiesz ” o typografii WordPress jest błędna.

Aby uzyskać więcej informacji na temat używania czcionek w WordPress, zapoznaj się z kodeksem: zabawa czcionkami. Jeśli napotkasz problemy z dodaniem czcionek, otwórz zgłoszenie do pomocy technicznej, a nasi bohaterowie pomocy technicznej odpowiedzą na twoje pytanie.

Jakie są Twoje ulubione czcionki? Jak dodałeś je do swojej witryny? Daj nam znać w komentarzach poniżej.

Tagi:

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd “nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

9 Najlepsze Darmowe Wtyczki WordPress Author Bio Box

W artykule: 1. Simple Author Box2. Branda3. Autor postu WP4. Author Bio…