Dodawanie niestandardowych czcionek do WordPress


Jak dodać niestandardowe czcionki do WordPress


Wybór odpowiedniej czcionki dla witryny WordPress jest centralnym elementem projektowania stron internetowych i budowania marki.

Jak kolory, obrazy i inne elementy, typografia odgrywa dużą rolę w jaki sposób twoja strona jest postrzegana przez odwiedzających.

Na szczęście czcionki WordPress są jedną z wielu rzeczy, które można dowolnie dostosowywać. Możesz użyć dowolnej dowolnej niestandardowej czcionki na swojej stronie WordPress.

Omówimy wszystko, co musisz wiedzieć o czcionkach WordPress:

  • A) Jak dodać niestandardowe czcionki do WordPress (ręcznie)
  • B) Jak dodać niestandardowe czcionki do WordPress (przez wtyczkę)
  • Po co używać niestandardowych czcionek w WordPress
  • Gdzie znaleźć niestandardowe czcionki
  • Wniosek

A) Jak ręcznie dodawać niestandardowe czcionki do WordPress

Jeśli chodzi o ręczne dodawanie niestandardowych czcionek do WordPress, masz trzy główne opcje: HTML, JavaScript i CSS. Każda metoda ma swoje zalety i wady, a wybór odpowiedniej metody zależy od konfiguracji. Nie martw się, omówimy każdy z nich szczegółowo.

1. Korzystanie z CSS i @import

Zacznijmy od najmniej zalecanej metody. Jeśli planujesz zainstalować niestandardowe kroje pisma z czcionek Google, być może zauważyłeś, że ma on zakładkę oznaczoną @import. Usługa daje ci kawałek kodu CSS.

karta importu w czcionkach Google

Możesz go wziąć bez zmian i wstawić do nagłówka (więcej na ten temat poniżej) lub skopiować bez >nawiasy kwadratowe na początku motywu (lub jeszcze lepiej, motyw potomny) style.css plik.

/ *
Nazwa motywu: Twenty Seventeen Child
Motyw URI: https://wordpress.org/themes/twentyseventeen/
Szablon: dwadzieścia siedemnaście
Autor: zespół WordPress
Autor URI: https://wordpress.org/
Wersja: 1.0

* /

@import url („https://fonts.googleapis.com/css?family=Open+Sans|Roboto”);


/ * dodatkowy CSS idzie tutaj * /

Spowoduje to załadowanie czcionki do witryny z arkusza stylów. Wygląda na proste rozwiązanie, prawda? Dlaczego więc jest to najmniej zalecane?

Powodem są problemy z wydajnością. Za pomocą @import nie jest już zalecaną drogą, ponieważ uniemożliwia przeglądarkom pobieranie kilku arkuszy stylów jednocześnie. Konsekwencja: wolniejszy czas ładowania strony. Unikaj tego, jeśli możesz.

2. Korzystanie z pliku szablonu WordPress

Drugim sposobem na uzyskanie czcionek w witrynie jest pobranie kodu dostarczonego przez biblioteki czcionek i skopiowanie ich do swojego header.php plik szablonu. Ma większość standardowych motywów WordPress.

Umieść go gdzieś pomiędzy i nawiasy klamrowe W ten sposób czcionka będzie ładowana za każdym razem, gdy strona zostanie załadowana.

wprowadź kod czcionek Google do nagłówka WordPress

Jeśli używasz motywu podrzędnego, skopiuj motyw nadrzędny header.php plik do katalogu motywów podrzędnych i wprowadź tam zmiany.

Niektóre motywy mają ustawienia umożliwiające dodawanie niestandardowego kodu do nagłówka i stopki za pomocą backendu. Jest to również opłacalna opcja.

3. Korzystanie @ font-face

Do tej pory rozmawialiśmy tylko o tym, jak używać niestandardowych czcionek w WordPressie, które są hostowane gdzie indziej, a mianowicie na serwerach Google i Adobe. Możliwe jest jednak także hostowanie czcionek we własnej witrynie i stamtąd udostępnianie ich w przeglądarkach użytkowników.

Aby to zrobić, musisz najpierw pobrać daną czcionkę. Pamiętasz przycisk pobierania czcionek Google? Ten przyda się teraz. Inni dostawcy umożliwiają także pobieranie czcionek.

Kiedy to zrobisz, upewnij się, że masz go w formacie czcionki internetowej. Oznacza to, że TTF, OTF lub WOFF. Znajdziesz więcej informacji na ten temat tutaj. Jeśli nie masz odpowiedniego formatu czcionki internetowej, możesz również użyć ten serwis przekonwertować czcionkę na obsługiwaną.

Po przygotowaniu plików czcionek musisz przesłać je do witryny WordPress za pośrednictwem FTP. Dobrym miejscem do ich przechowywania jest podkatalog motywu podrzędnego o nazwie czcionki (kreatywne, wiemy).

Następnie musisz załadować czcionkę do arkusza stylów za pośrednictwem @ font-face. Oto jak to wygląda:

@ font-face {
rodzina czcionek: Roboto;
src: url (http: //localhost/wordpress/wp-content/themes/twentyseventeen-child/fonts/Roboto-Regular.ttf);
grubość czcionki: normalna;
}

Pamiętaj, aby zastąpić nazwę czcionki i adres jej lokalizacji na własnej stronie. Następnie będzie można używać nowej niestandardowej czcionki.

Nie jest to jednak najlepsze rozwiązanie, szczególnie pod względem wydajności. Serwery Google są prawdopodobnie szybsze niż twoje, dlatego ładowanie niestandardowych czcionek jest prawdopodobnie lepszym rozwiązaniem.

4. Kolejkowanie czcionek - „WordPress Way”

Jeśli naprawdę chcesz dodać niestandardowe czcionki do WordPress w odpowiedni sposób, użyjesz swojej functions.php plik (w katalogu aktualnie aktywnego motywu) i funkcję  wp_enqueue_script lub wp_enqueue_style.

Z ich pomocą możemy pobrać fragmenty kodu dostarczone przez strony czcionek. Jednak zamiast kopiować je do pliku, dodamy je do nagłówka za pomocą funkcji.

Jaka jest różnica pomiędzy wp_enqueue_script i wp_enqueue_style? Jak sugerują ich nazwy, jeden służy do dodawania skryptów, drugi do arkuszy stylów. To, który z nich będzie odpowiedni do użycia, zależy od sposobu dostarczenia niestandardowych czcionek z ich źródła.

Na przykład Google Fonts daje czcionki jako arkusze stylów. W takim przypadku możesz dodać je do swojej witryny WordPress w ten sposób:

funkcja add_google_fonts () {
wp_enqueue_style („google_web_fonts”, „https://fonts.googleapis.com/css?family=Open+Sans|Roboto”);
}

add Działalności („wp_enqueue_scripts”, „add_google_fonts”);

W przeciwieństwie do tego czcionki z Adobe Edge Web Fonts mają kod JavaScript. Dlatego w celu umieszczenia ich w kolejce w witrynie kod wygląda następująco:

funkcja add_adobe_fonts () {
wp_enqueue_script ('adobe_edge_web_fonts', '//use.edgefonts.net/open-sans.js');
}

add Działalności („wp_enqueue_scripts”, „add_adobe_fonts”);

Czy to nie było takie trudne? Dodatkowo otrzymujesz dodatkowe punkty za robienie tego w sposób WordPress.

5. Wywołaj niestandardowe czcionki w swoim arkuszu stylów

Teraz, gdy czcionki zostały dodane do Twojej witryny, możesz ich oficjalnie używać. Aby to zrobić, wystarczy dodać deklarację dla nowej czcionki w arkuszu stylów. Na przykład, aby zmienić czcionkę dla tagów nagłówka, użyj czegoś takiego:

h1,
h2,
h3,
h4,
h5,
h6 {
rodzina czcionek: „Roboto”;
}

Uwaga: Zwróć uwagę, w jaki sposób usługa, z której korzystasz, określa deklarację CSS dla twoich czcionek. Na naszej stronie testowej najwyraźniej nie mogliśmy uruchomić czcionek internetowych Adobe Edge, ponieważ wywołują Open Sans w CSS z otwarte w przeciwieństwie do „Open Sans” w czcionkach Google.

Otóż ​​to. Teraz wiesz, jak ręcznie dodawać niestandardowe czcionki do WordPress. Gratuluj sobie, to jest wiedza następnego poziomu! Oczywiście te same działania są możliwe za pośrednictwem wtyczek. O tym będziemy mówić dalej.

B) Jak dodać niestandardowe czcionki do WordPress poprzez wtyczkę

Sfera WordPress nie byłaby tym, czym jest, gdyby nie było kilku rozwiązań wtyczek do dodawania niestandardowych czcionek do platformy. Omówimy, jak korzystać Łatwe czcionki Google, która jest jedną z najpopularniejszych wtyczek w tym obszarze.

1. Zainstaluj wtyczkę

Pierwszym krokiem jest instalacja wtyczki. Aby to zrobić, przejdź do Wtyczki> Zainstaluj nowe. Następnie wyszukaj nazwę wtyczki. W wynikach wyszukiwania kliknij Zainstaluj teraz i aktywuj wtyczkę, gdy znajdzie się w Twojej witrynie.

2. Dodaj / zmień czcionki w swojej witrynie

Gdy wtyczka jest aktywna, znajduje się nowy element menu o nazwie Typografia pod Wygląd> Dostosuj.

menu typografii w edytorze wordpress

Po kliknięciu i wybraniu Domyślna typografia, znajdziesz listę elementów sterujących do zmiany czcionki akapitów i nagłówków.

łatwe ustawienia czcionek Google w dostosowywaniu wordpress

Korzystanie z nich jest naprawdę proste. Po prostu kliknij menu rozwijane tam, gdzie jest napisane Edytuj czcionkę dla tej części witryny, dla której chcesz to zmienić. To daje dostęp do tego menu:

łatwe czcionki google zmień czcionkę

Tutaj najważniejsza jest część pod Rodzina czcionek. Tutaj możesz wybrać nowy typ czcionki z całej biblioteki czcionek Google (użyj Skrypt / Podzbiór aby ograniczyć wybór czcionek do znaków ze znakami specjalnymi).

Czcionki są uporządkowane według czcionek standardowych, szeryfowych, bezszeryfowych, displayowych, pisma ręcznego i czcionek o stałej szerokości. Możesz jednak po prostu wyszukać je według nazwy.

Po kliknięciu czcionki po prawej stronie można wyświetlić podgląd zmian w czasie rzeczywistym.

zmieniono niestandardową czcionkę w łatwych czcionkach Google

3. Skonfiguruj czcionkę

Po wybraniu czcionki istnieje wiele opcji dalszego dostosowywania typografii.

Przede wszystkim możesz zmienić grubość czcionki / styl w menu o tej samej nazwie. To kontroluje grubość liter.

Ponadto w ramach Dekoracja tekstu, możesz dodać podkreślenie, przekreślenie i podkreślenie. Przekształcanie tekstu pozwala także ustawić na wszystkie wielkie i małe litery lub wielkie litery każdej pierwszej litery. Pod Wygląd Na górze możesz także kontrolować kolor czcionki, kolor tła, rozmiar czcionki, wysokość linii i odstępy między literami.

ustawienia wyglądu w łatwych czcionkach Google

Wreszcie, Pozycjonowanie umożliwia zmianę innych ustawień, takich jak margines, wypełnienie, obramowanie, promień obramowania i wyświetlanie.

ustawienia pozycjonowania w łatwych czcionkach Google

Krótko mówiąc, powinieneś być w stanie całkowicie dostosować czcionki w swojej witrynie. Łatwe, prawda? Nie zapomnij trafić Zapisz i opublikuj u góry, gdy jesteś zadowolony ze swoich zmian.

To nie działa, co mam zrobić?

Czasami nie możesz zmienić niektórych czcionek w swojej witrynie. Zwykle dzieje się tak, gdy używany motyw zawiera niestandardowe klasy CSS i selektory do ich stylizacji.

Na przykład w motywie Twenty Sixteen tytuły postów na blogach są nie tylko zdefiniowane jako H1, ale mają także klasę CSS o nazwie .tytuł. Z tego powodu wtyczka nie może ich zmienić.

Aby rozwiązać ten problem, musisz utworzyć tzw kontrola czcionki pod Ustawienia> Czcionki Google.

dodaj kontrolę czcionek w łatwych czcionkach Google

Możesz powiązać selektory CSS z nową kontrolą i wymusić wymuszenie w razie potrzeby. Po wykonaniu tej czynności nowa kontrola czcionek będzie dostępna jako dodatkowa opcja w WordPress Customizer pod Typografia motywów. Bułka z masłem.

Inne niestandardowe czcionki Wtyczki WordPress

Istnieją również inne wtyczki WordPress do dodawania niestandardowych czcionek:

  • Użyj dowolnej czcionki - Pomaga używać przesyłanych czcionek bez żadnego CSS. Mieści czcionki na własnym serwerze, a także oferuje narzędzia do konwersji formatów czcionek.
  • Czcionki Typekit dla WordPress - Używaj czcionek Adobe Typekit usługa (w której musisz się zarejestrować). Umożliwia wprowadzanie kodów osadzania i niestandardowego CSS bezpośrednio we wtyczce.
  • Czcionki TK Google - Alternatywne rozwiązanie do osadzania czcionek Google, które prawie przenosi wrażenia związane z czcionkami Google do backendu WordPress. Wypróbuj czcionki z podglądem i niestandardowym tekstem, a następnie zmień go w programie WordPress Customizer.

Dlaczego warto korzystać z niestandardowych czcionek w witrynie WordPress??

Typografia jest nauką samą w sobie i nie będziemy w stanie zapewnić pełnego kursu na temat używania czcionek w projektowaniu stron internetowych. W końcu nie chodzi tylko o czcionkę, ale także o jej rozmiar, nachylenie, grubość i wiele innych rzeczy. Jednakże, my mogą wyjaśnij, dlaczego używanie niestandardowych czcionek w witrynie WordPress jest dobrym pomysłem.

1. Typografia jest częścią pierwszego wrażenia

Przede wszystkim używana czcionka ma duży wpływ na postrzeganie witryny. Czy Twoja strona jest przyjemna i zabawna? Czy jesteś profesjonalistą? Odwiedzający decydują o tym jednym spojrzeniem, a twoja typografia odgrywa dużą rolę w ich postrzeganiu.

2. Czcionki mają znacznie większy wpływ niż myślisz

Może wpływać na twoją umiejętność uczenia się, zapamiętywania tekstów, a nawet wpływać na twój nastrój.

Na przykład w jednym Badania, zauważono, że jeśli chcesz wydłużyć czas czytania tekstu, powinieneś użyć czcionki szeryfowej. Jeśli jednak chcesz przeczytać więcej w krótkim czasie, powinieneś przełączyć się na czcionkę bezszeryfową.

Inne badanie pokazało ludziom te same instrukcje ćwiczeń w różnych krojach. Następnie poprosili uczestników, aby oszacowali, ile czasu zajmie im wykonanie wspomnianych instrukcji. Fascynujące jest to, że osoby z bardziej złożoną czcionką zgadywały, że zajęłoby im to więcej czasu niż grupa z prostszą czcionką. W rezultacie rzadziej stosowali się do ćwiczeń.

Gdzie znaleźć niestandardowe czcionki

1. Użyj czcionek Google, aby znaleźć niestandardową typografię

Pierwsza usługa, na którą się przyjrzymy, to Czcionki Google. Jak sama nazwa wskazuje, jest to usługa Google oferująca ponad 800 różnych czcionek. Darmowy w użyciu. Dla wszystkich.

Oto jak go użyć:

2. Znajdź odpowiednią czcionkę

Gdy po raz pierwszy przejdziesz na stronę Czcionki Google (po prostu wpisz to w wyszukiwarce Google), zobaczysz to:

jak dodawać niestandardowe czcionki na stronie głównej czcionek Google WordPress

Interfejs użytkownika został stworzony, aby pomóc Ci znaleźć odpowiednią czcionkę do swoich celów. Jeśli masz już na myśli czcionkę, możesz po prostu wpisać jej nazwę w polu wyszukiwania po prawej stronie.

Jeśli nie, możesz filtrować czcionki na wiele różnych sposobów, na przykład według kategorii:

  • Szeryfowy - Znaczenie czcionek z zawiłymi liniami na końcu, jak Times New Roman.
  • Sans-Serif - Proste czcionki bez zawijasów, takie jak Helvetica. Czcionki używane na tej stronie internetowej są tego przykładem.
  • Pokaz - Czcionki, które mogą być używane w większych rozmiarach, takie jak nagłówki.
  • Pismo odręczne - Czy chcesz, aby Twoja typografia wyglądała, jakby została napisana ręcznie? To jest twoje ustawienie.
  • Monospace - Typografia, w której wszystkie postacie zajmują to samo miejsce, lubię to.

Inne filtry obejmują:

  • Sortowanie - Sortuj czcionki według trendów, popularne, daty dodania lub alfabetycznie.
  • Języki -Ogranicz wybór czcionek do języków, które nie są napisane alfabetem łacińskim, takich jak arabski, tajski lub wietnamski.
  • Wiele stylów -Wybierz, ile dostępnych stylów potrzebujesz, co oznacza, że ​​czcionka jest dostępna w różnych grubościach, kursywie, pogrubieniu i innych.
  • Grubość - Wybierz żądaną grubość czcionki.
  • Skos - Taki sam jak grubość, ale dla nachylenia. Wynosi od prostego do prawie poziomego.
  • Szerokość - Filtruj czcionki według szerokości ich liter i odstępów.

Po zastosowaniu filtrów wyniki wyszukiwania są dostosowywane w czasie rzeczywistym. Po lewej stronie zobaczysz dostępne czcionki w swojej kategorii i przykładowe zdania.

Po najechaniu kursorem na czcionkę możesz użyć menu rozwijanych u góry, aby czcionki Google wyświetlały przykładowy akapit, cały alfabet lub cyfry. Możesz także po prostu kliknąć pole zdania i napisać, co chcesz.

edytuj przykładowy tekst czcionkami Google

Oprócz tego istnieją opcje zmiany stylu i rozmiaru czcionki. Po wprowadzeniu zmian możesz też zastosować je do wszystkich wyników wyszukiwania. Na koniec spójrz na stronę szczegółów czcionki, klikając Zobacz wzór.

strona ze szczegółowymi czcionkami w czcionkach Google

3. Dodaj czcionki do swojej kolekcji

Jeśli podoba Ci się konkretna czcionka, możesz użyć czerwonego znaku plus w prawym górnym rogu, aby dodać ją do swojej kolekcji. Spowoduje to otwarcie menu na dole, w którym zobaczysz wszystkie wybrane czcionki.

czcionki wybrane w czcionkach Google

Pamiętaj, że możesz dodać więcej niż jedną rodzinę czcionek. Ma to na przykład sens, gdy wybierasz jeden do kopii ciała, a drugi do nagłówków.

4. Dostosuj ustawienia czcionek

Gdy będziesz zadowolony ze swojej kolekcji, kliknij dolne menu. Spowoduje to otwarcie tego ekranu:

ustawienia czcionek w czcionkach Google

Jak widać, możesz znaleźć fragmenty kodu do osadzenia i używania czcionek w swojej witrynie. Stanie się to ważne później. Na razie kliknij kartę z napisem Dostosuj. Spowoduje to przejście do tego menu:

dostosuj czcionki w czcionkach Google

Tutaj możesz wybrać style czcionek, o których mowa. Jest to ważne, jeśli chcesz używać czcionek o różnych rozmiarach, co często ma miejsce.

Bądź jednak ostrożny: im więcej stylów ma załadować Twoja witryna, tym bardziej będzie ona wolniejsza (Google Fonts wskazuje nawet szybkość ładowania Twojej aktualnej kolekcji w prawym górnym rogu). Pomyśl więc o tym, czego naprawdę potrzebujesz i wybierz tylko to. Nawiasem mówiąc, istnieje więcej sposobów na przyspieszenie WordPressa.

Jeśli potrzebujesz innego języka niż standardowy alfabet łaciński, zaznacz go również na dole.

wybierz języki czcionek w czcionkach Google

Poza tym wszystko, co musisz wiedzieć, to dwie ikony strzałek u góry.

przycisk pobierania i udostępniania czcionek Google

Ten po lewej stronie umożliwia podgląd i udostępnienie kolekcji czcionek. Kiedy to zrobisz, otworzy się rozszerzona strona, na której możesz wstawić przykładowy tekst i zobaczyć go we wszystkich czcionkach jednocześnie. Tę stronę również warto udostępniać innym.

Ważniejszy jest przycisk pobierania obok niego. Klikając go, możesz pobrać pliki czcionek i użyć ich na komputerze stacjonarnym (na przykład w Photoshopie). Posługiwać się Skyfonts aby były na bieżąco.

Później pokażemy również sposób przesłania tych plików na serwer i hostowania czcionek bezpośrednio w witrynie. Pamiętaj o tym na przyszłość. Na razie pokażemy Ci drugą, podobną bibliotekę czcionek.

Dodatkowe źródło czcionek niestandardowych

  • Zalecamy ponad 15 bezpiecznych czcionek internetowych

Z powyższym powinieneś być w stanie znaleźć coś dla siebie. Ostatnia wskazówka - jeśli nie wiesz, jak poprawnie łączyć czcionki, użyj Para czcionek gdzie projektanci wykonali za Ciebie prace nóg.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
Like this post? Please share to your friends:
Adblock
detector
map