Jak dodać niestandardowe czcionki do witryny WordPress?

Czy chcesz dowiedzieć się, jak dodawać niestandardowe czcionki do witryny WordPress?

Dlaczego Twój blog jest nudny, używając standardowych czcionek? Pozwól swojemu blogowi mówić o Twojej żywej osobowości i tematach, które poruszasz, korzystając z szerokiej gamy niestandardowych czcionek. Czcionki niestandardowe to fajna funkcja, która sprawia, że ​​Twój blog wygląda lepiej niż inne.

Spojrzmy prawdzie w oczy; wszyscy kochamy blogi i strony internetowe z odpowiednimi czcionkami. Nie tylko ozdabiają witrynę, ale także pomagają przyciągnąć użytkownika do Twoich treści. Jednak wybór standardowych czcionek WordPress jest ograniczony i zależy od używanego motywu. Dobrą wiadomością jest to, że możesz dodać je ręcznie lub za pomocą WordPress wtyczki wyspecjalizowany.

I tu pojawiają się dwa pytania: skąd wziąć niestandardowe czcionki dla WordPressa i jak zainstalować niestandardowe czcionki na twojej stronie internetowej.

Przekonajmy się.

Dlaczego powinienem używać czcionek niestandardowych?

Dawno minęły czasy, kiedy Times New Roman i Georgia były uważane za jedyne kroje pisma dla tekstu na stronach internetowych. W ciągu ostatnich kilku lat przestrzeń czcionek zmieniła się całkowicie wraz z pojawieniem się czcionek takich jak Google Fonts i inne.

Obecnie w Internecie dostępne są setki bezpłatnych czcionek, informacji i pomocy szkoleniowych oraz zasobów projektowych. W przeciwieństwie do Adobe Illustrator, Photoshop i innych klasycznych aplikacji, WordPress nie zapewnia pełnej kontroli nad domyślnymi czcionkami. Tylko niektóre motywy WordPress wybierają obsługę i używanie niestandardowych czcionek.

Dlatego w tym artykule dowiesz się, jak znaleźć odpowiednie czcionki niestandardowe i używać ich na swojej stronie WordPress.

Znaczenie używania niestandardowych czcionek

Pytasz, po co zmieniać czcionki, wcięcia wyrazów, odstępy między wierszami, odstępy między literami lub nasycenie czcionek? Jednak niektóre badania pokazują, że typografia poprawia czytanie ze zrozumieniem.

Wiele zależy od konstrukcji czcionek. Na poziomie świadomym i podświadomym – każdy ocenia zawartość strony internetowej według projektu.

Projekt czcionki wpływa na czytelników, nawet jeśli nie zwracają na to uwagi. Rezygnacja z projektowania czcionek oznacza rezygnację z samego rozwoju! Od tego zależy nastrój czytelnika. Czcionka ułatwia czytanie lub zmusza użytkowników do opuszczenia strony.

Wszystkie przeglądarki internetowe zawierają zestaw domyślnych czcionek. Oznacza to, że jeśli czcionka nie jest określona w CSS strony, zostanie użyta wersja standardowa. Nadal możesz używać domyślnych czcionek, ale utrudniają to użytkownikom. Dlatego tak ważne jest użycie niestandardowej czcionki. Jeśli Twój motyw WordPress nie daje opcji zmiany czcionki, istnieje wiele stron internetowych i narzędzi, które mogą Ci pomóc.

Alternatywy dla czcionek Google

Wielu z was zna Czcionki Google. Istnieje wiele innych stron internetowych, na których można znaleźć piękne czcionki. Niektóre z nich są bezpłatne do użytku osobistego. Jeśli potrzebujesz użytku komercyjnego, będziesz potrzebować licencji. Czcionki Google i czcionki Adobe Edge są bezpłatne. Dlatego nie są tak wyjątkowe.

Oto niektóre inne zasoby do wyszukiwania czcionek do użytku bezpłatnego i komercyjnego:

1. TemplateMonster — Na stronie TemplateMonster znajdziesz wszystko, czego potrzebujesz do projektowania stron internetowych. Istnieje również wiele czcionek i pakietów czcionek do użytku osobistego za niewielką cenę. Dodatkowo, aby ułatwić Ci wybór, wszystkie czcionki prezentowane na broszurach lub ramkach. Każda czcionka posiada również licencję komercyjną.
2. Myfonts — MyFonts oferuje obecnie największy wybór czcionek na świecie. Jednak ceny są tutaj również w górnym segmencie. Więc jeśli masz napięty budżet, może to nie być dla ciebie.
3. Czcionka Wiosna — Fontspring sprzedaje nowatorskie czcionki do użytku komercyjnego. Ale w prawie każdej rodzinie do celów osobistych można używać 1-2 darmowych czcionek. Jest też osobna sekcja z darmowymi czcionkami. Kolekcja tętni życiem. Jednak przed pobraniem należy dokładnie zapoznać się z informacjami licencyjnymi dotyczącymi określonej czcionki.
4. Czcionki Cufonowe — To także ogromny zbiór różnych czcionek. Wybierz dowolny, a zobaczysz stronę ze szczegółowymi informacjami na jego temat. Dostępnych jest wiele darmowych czcionek i są one podzielone na poszczególne sekcje. System sortowania w CufonFonts jest dość elastyczny i wygodny. Uwzględniono również obsługę czcionek internetowych.
5. Dafont — Kolejna dostępna kolekcja 3 darmowych czcionek. Większość z nich jest przeznaczona wyłącznie do użytku osobistego. Fajną funkcją DaFont jest system kategorii. Możesz wybrać czcionki w stylu komiksów, gier wideo, vintage itp….

Wybór czcionek jest bardzo kuszący, ponieważ wszystkie są piękne. Ale nie powinieneś wybierać dużo. Nie używaj więcej niż dwóch czcionek w witrynie sieć. A późniejwygląd Twojej strony będzie konsekwentny. Po wybraniu czcionek pamiętaj o przesłaniu plików dla każdego stylu, którego będziesz używać (zwykły, pogrubiony, kursywa itp.).

Teraz, gdy już wybrałeś odpowiednią czcionkę dla swojej witryny, dowiedzmy się, jak ją dodać.

Jak dodać niestandardowe czcionki do WordPressa

Istnieje kilka sposobów dodawania czcionek do witryny WordPress:

1. Wtyczki : w tym przypadku inaczej WordPress wtyczki służą do ułatwienia procesu.
2. ręcznie : korzystając z tej metody, musisz pobrać czcionkę pobraną ze strony i zmodyfikować plik CSS.
3. Tematy: Wiele popularnych motywów ma wbudowane opcje dostosowywania czcionek (uwaga – nie będziemy omawiać tej opcji, ponieważ proces będzie się różnił w zależności od używanego motywu.

Opcja 1 – Zmień czcionki WordPress za pomocą wtyczek

Jeśli nie zależy nam na globalnych zmianach, możemy przystąpić do instalacji WordPress wtyczki który zmieni czcionki na Twojej stronie internetowej.

Funkcje wtyczek z niestandardowymi czcionkami

Oprogramowanie open source ma przewagę w interesie społeczności, a WordPress również ma tę zaletę. Kilka wtyczek WordPress umożliwia dodawanie niestandardowych czcionek. Jak wybrać odpowiednią wtyczkę, gdy jest ich tak dużo? Jakie są cechy wtyczek WordPress z niestandardowymi czcionkami?

Oto kilka punktów do rozważenia:

• Możliwość korzystania z niestandardowej czcionki
• Możliwość korzystania z wielu czcionek
• Nagłówki i komponenty docelowe
• Bonus: możliwość zmiany ustawień czcionki z edytora wizualnego

To wszystko. Pierwsza cecha na liście jest bardzo ważna. Nadal możesz pobierać czcionki z witryn takich jak DaFont, Font Squirrel itp., ale musisz mieć możliwość ich przesyłania do WordPressa.

Przyjrzyjmy się niektórym wtyczkom do WordPressa, które umożliwiają przesyłanie niestandardowych czcionek.

1. Lepsza fantastyczna czcionka

Ta wtyczka WordPress pozwoli jej użytkownikom automatycznie łączyć najnowszą wersję czcionek Better Font Awesome z CSS, skróty i więcej. Ponadto ta wtyczka WordPress jest aktualizowana automatycznie.

Znajdziesz jako funkcjonalności: regularne aktualizacje, generator skrótów, kompatybilność z innymi wtyczkami WordPress, itp ...

Pobierz | Demo | hosting

2. Czcionki Google dla WordPress

Ta wtyczka WordPress składa się ze specjalnych czcionek 877, które pozwolą Ci używać wszystkich czcionek na stronach WordPress. Dzięki podglądowi w czasie rzeczywistym pozwoli Ci zobaczyć, jak będzie wyglądać Twoja witryna po zastosowaniu czcionki. 

Ponadto będziesz mógł go zapisać i edytować na froncie, gdy znajdziesz kombinację, która Ci się spodoba.

Jego funkcje obejmują: podgląd w czasie rzeczywistym, a dość zaawansowane SEO, obsługa wielu języków, obsługa większej liczby czcionek 870 + Google, łatwe aktualizacje i wiele innych.

Pobierz | Demo | hosting

3. Wtyczka czcionek

Fonts Plugin to darmowa wtyczka WordPress, która umożliwia użytkownikom dostęp do bibliotek Google Fonts i Adobe Fonts. Dzięki tej wtyczce WordPress możesz wybierać spośród ponad 1000 czcionek Google i Adobe, używać wielu czcionek w swojej witrynie i testować różne opcje za pomocą funkcji podglądu wtyczki w czasie rzeczywistym w dostosowywaniu WordPress.

Aby uzyskać więcej sposobów na dostosowanie typografii witryny, takich jak rozmiar czcionki, odstępy między literami i wysokość linii, możesz uaktualnić do wersji premium, Czcionki Wtyczka Pro.Pobierz | Demo | hosting

4. Łatwe czcionki Google

Łatwe czcionki Google są jednym z najlepsze wtyczki WordPress aby dostosować typografię swojej witryny. Podobnie jak wtyczka Fonts, pozwala wybierać spośród setek czcionek Google i wyświetlać je w programie Customizer przed dodaniem ich do witryny.

Chociaż zapewnia dostęp do mniejszej liczby czcionek Google, jest wyjątkowy, ponieważ umożliwia tworzenie niestandardowych kontrolek czcionek i reguł w obszarze administracyjnym, które natychmiast pojawią się w dostosowywaniu WordPressa.

Pobierz | Demo | hosting

Opcja 2 – Ręczna instalacja niestandardowych czcionek WordPress

Korzystając z dyrektywy @font-face, możesz podłączyć jedną lub więcej czcionek do swojej witryny. Ale ta metoda ma swoje plusy i minusy.

korzyści:

• Dzięki CSS możesz łączyć czcionki dowolnego formatu: ttf, otf, woff, svg.
• Pliki czcionek będą znajdować się na Twoim serwerze – nie będziesz zależny od usług innych firm.

wady :

• Aby uzyskać prawidłowe połączenie czcionek dla każdego stylu, musisz zarejestrować osobny kod.
• Bez znajomości CSS możesz się łatwo pomylić.

Ale to nie jest prawdziwy problem, jeśli możesz po prostu skopiuj gotowy kod i gdzie musisz określić swoje wartości.

Uwaga : Zanim zaczniesz, pamiętaj, aby utwórz motyw potomny dla Twojej witryny. W ten sposób możesz wprowadzić wszystkie zmiany w motywie potomnym, pozostawiając motyw główny, aby w razie potrzeby móc go łatwo zaktualizować w przyszłości.

Krok 1: Utwórz folder „czcionki”

W motywie potomnym utwórz nowy folder „czcionki” pod: wp-content/themes/your-child-theme/fonts

Krok 2. Prześlij pobrane pliki czcionek do swojej witryny

Można to zrobić za pośrednictwem panelu sterowania hostingu lub przez FTP.

Dodaj wszystkie pliki czcionek do nowo dodanego folderu czcionek: wp-content/themes/ W motywie potomnym utwórz nowy folder „czcionki” pod: wp-content/themes/your-child-theme/fonts które stworzyłeś.

Krok 3. Importuj czcionki za pomocą arkusza stylów motywu potomnego

Otwórz plik style.css motywu potomnego i dodaj następujący kod na początku pliku CSS (po komentarzu motywu potomnego):

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont.eot');
src: url('fonts/WebFont.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont.woff') format('woff'),
url('fonts/WebFont.ttf') format('truetype'),
url('fonts/WebFont.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: normal;
}

Où Moja czcionka internetowa to nazwa czcionki, a wartość właściwości src (dane w nawiasach w cudzysłowie) to ich lokalizacja (linki względne). Każdy styl musimy określić osobno.

Ponieważ najpierw łączymy styl normalny, ustawiamy właściwości font-weight i font-style na normalny.

Krok 4. Podczas dodawania kursywa, napisz:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic.eot');
src: url('fonts/WebFont-Italic.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic.woff') format('woff'),
url('fonts/WebFont-Italic.ttf') format('truetype'),
url('fonts/WebFont-Italic.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: italic;
}

Gdy wszystko jest takie samo, jako jedyni dołączamy właściwość stylu czcionki do kursywy.

Krok 5. Aby dodać pogrubioną czcionkę, dodaj następujący kod:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Bold.eot');
src: url('fonts/WebFont-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Bold.woff') format('woff'),
url('fonts/WebFont-Bold.ttf') format('truetype'),
url('fonts/WebFont-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: normal;
}

Gdzie ustawiamy właściwość font-weight na pogrubienie.

Pamiętaj, aby określić poprawną lokalizację plików czcionek dla każdego stylu.

Krok 6. Aby połączyć pogrubioną kursywą, wpisz następujące polecenie:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic-Bold.eot');
src: url('fonts/WebFont-Italic-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic-Bold.woff') format('woff'),
url('fonts/WebFont-Italic-Bold.ttf') format('truetype'),
url('fonts/WebFont-Italic-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: italic;
}

Cóż, to wszystko. Teraz, gdy połączyłeś cztery style czcionek ze swoją witryną.

Ale jest jedna uwaga: to połączenie czcionek nie wyświetla się poprawnie w Internet Explorerze 8. Pocieszeniem jest to, że bardzo niewiele osób nadal używa IE8.

Inne zalecane zasoby

Zachęcamy również do zapoznania się z poniższymi zasobami, aby przejść dalej w zakresie kontroli nad witryną i blogiem.

• 10 wtyczek akordeonowych WordPress dla strony internetowej
• Jak dodać wiele kolumn w WordPress
• Niektóre wtyczki do integracji usług Google na swoim blogu
• Wtyczki 5 WordPress do wyświetlania powiadomień
• Jak używać różnych środowisk na WordPressie

Wnioski

Jaka jest pierwsza rzecz, którą zauważają użytkownicy odwiedzający Twoją witrynę? Zgadza się, jego projekt! Większość projektów opiera się na odpowiednim użyciu pięknych czcionek. Musisz więc zadbać o projekt czcionki swojej witryny. Dodaj kod lub użyj jednej z wtyczek wymienionych powyżej, aby osadzić nowy styl czcionki. To, jak wybierzesz, zależy od Ciebie.

Upewnij się, że nie używasz więcej niż dwóch czcionek w tej samej witrynie. Ponieważ im więcej niestandardowych czcionek dodasz do witryny, tym bardziej spadnie prędkość witryny.

To wszystko w tym artykule, który pokazuje, jak dodawać niestandardowe czcionki do witryny WordPress. Zapraszamy do spróbowania. Jeśli masz jakiekolwiek wątpliwości lub sugestie, daj nam znać w ciągu commentaires.

Będziesz jednak mógł również skonsultować się z nami Zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.

Tymczasem udostępnij ten artykuł w różnych sieciach społecznościowych.   

...