Jak dodać niestandardowe czcionki do swojej witryny WordPress

Dlaczego Twój blog jest nudny przy użyciu standardowych czcionek? Pozwól blogowi mówić o twojej żywej osobowości i poruszanych tematach dzięki szerokiej gamie niestandardowych czcionek. Niestandardowe czcionki to fajna funkcja, która pozwala blogowi wyglądać lepiej niż inne.


Spojrzmy prawdzie w oczy; wszyscy kochamy blogi i witryny z odpowiednimi czcionkami. Nie tylko ozdabiają stronę, ale także pomagają przyciągnąć użytkownika do twoich treści. Wybór standardowych czcionek WordPress jest jednak ograniczony i zależy od używanego motywu. Dobrą wiadomością jest to, że możesz dodać je ręcznie lub za pomocą specjalistycznych wtyczek.

I tutaj pojawiają się dwa pytania – skąd wziąć niestandardowe czcionki dla WordPress i jak zainstalować niestandardowe czcionki na twojej stronie WordPress.

Dowiedzmy Się.

 Dlaczego warto używać czcionek niestandardowych??

Dawno minęły czasy, kiedy Times New Roman i Georgia były uważane za jedyne czcionki dla tekstów 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 istnieją setki bezpłatnych czcionek, informacji i pomocy szkoleniowych oraz zasobów przeznaczonych do projektowania, dostępnych w Internecie. W przeciwieństwie do Adobe Illustrator, Photoshop i innych klasycznych aplikacji WordPress domyślnie nie zapewnia pełnej kontroli nad czcionkami. Tylko niektóre motywy wybierają obsługę i używanie niestandardowych czcionek.

Dlatego w tym poście dowiesz się, jak znaleźć odpowiednie niestandardowe czcionki i jak ich używać w witrynie WordPress.

Znaczenie używania niestandardowych czcionek

Dlaczego warto zmieniać czcionki, wcięcia między słowami, odstępy między wierszami, odstępy między literami lub nasycenie czcionek? Tak czy inaczej, niektóre badania to potwierdzają typografia poprawia umiejętność czytania.

Wiele zależy od budowy 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 nie uwagi. Porzucenie projektu czcionki oznacza porzucenie 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 zostanie określona w CSS strony, zostanie użyta wersja standardowa. Zawsze możesz użyć domyślnych czcionek, ale komplikują one pracę użytkowników. Dlatego konieczne jest użycie niestandardowej czcionki. Jeśli Twój motyw nie daje opcji zmiany czcionki, wiele stron internetowych i narzędzi może pomóc.

Alternatywne czcionki Google

Gdzie znaleźć niestandardowe czcionki

Wielu z was wie o darmowych czcionkach Google. Istnieje wiele innych stron, na których można znaleźć piękne czcionki. Niektóre z nich są bezpłatne do użytku osobistego. Jeśli potrzebujesz do użytku komercyjnego, potrzebujesz licencji. Czcionki Google i Adobe Edge są bezpłatne. Dlatego nie są one tak wyjątkowe. To nam nie odpowiada.

Tu jest kilka inne zasoby do wyszukiwania czcionek do użytku bezpłatnego i komercyjnego:

  1. Szablon potwora – Na stronie internetowej portalu TemplateMonster znajdziesz wszystko, czego potrzebujesz do projektowania stron internetowych. Istnieje również wiele czcionek i paczek czcionek do użytku osobistego za niewielką cenę. Są one również prezentowane w pakiecie ONE do tworzenia aplikacji internetowych. Kolekcja jest ogromna i kreatywna. Aby pomóc Ci wybrać, wszystkie czcionki przedstawione na broszurach lub ramkach. Każda czcionka ma również licencję komercyjną.
  2. MyFonts – MyFonts oferuje obecnie największy wybór czcionek na świecie. Ceny tutaj są jednak również w wyższym segmencie. Więc jeśli masz napięty budżet, może nie być dla ciebie.
  3. FontSpring – Fontspring sprzedaje fantazyjne czcionki do użytku komercyjnego. Ale w prawie każdej rodzinie 1-2 darmowe czcionki, które można wykorzystać do celów osobistych. Poza tym istnieje osobna sekcja z darmowymi czcionkami. Kolekcja jest wibracjami. Ale przed pobraniem będziesz musiał dokładnie przestudiować informacje o licencji dla konkretnej czcionki.
  4. Cufonfonts – To także obszerna kolekcja różnych czcionek. Wybierz dowolną, a zobaczysz stronę ze szczegółowymi informacjami na jej temat. Istnieje wiele darmowych czcionek i są one podzielone na poszczególne sekcje. System sortowania w CufonFonts jest dość elastyczny i wygodny. Dołączono także obsługę Webfont.
  5. Dafont – Kolejna dostępna kolekcja 3500 darmowych czcionek. Większość z nich jest przeznaczona wyłącznie do użytku osobistego. Fajna funkcja DaFont to system kategorii. Możesz wybierać czcionki w stylu komiksów, gier wideo, vintage lub stylizowane na japońskie znaki.

Wybór czcionek jest bardzo kuszący, ponieważ wszystkie są piękne. Ale nie powinieneś dużo wybierać. Posługiwać się na stronie nie więcej niż dwie czcionki. Wtedy wygląd Twojej witryny będzie spójny. Po wybraniu czcionek pobierz pliki dla każdego stylu, którego będziesz używać (normalny, pogrubiony, kursywa itp.).

Po wybraniu odpowiedniej czcionki dla witryny dowiedzmy się, jak ją dodać.

Jak dodać niestandardowe czcionki do WordPress

Istnieje kilka sposobów dodawania czcionek do witryny WordPress:

  1. Wtyczki: w tym przypadku używane są różne wtyczki WordPress w celu ułatwienia procesu.
  2. Ręcznie: korzystając z tej metody, musisz załadować pobraną czcionkę na stronę i edytować plik CSS.
  3. Tematy: wiele popularnych motywów zawiera 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, ale wysokiej jakości motywy premium, takie jak motyw Total WordPress, będą dostępne online dokumenty, które możesz łatwo śledzić – jak ten przewodnik, aby dodać niestandardowe czcionki do Total)

Opcja 1 – Zmień czcionki WordPress za pomocą wtyczek

Jeśli nie dbamy o globalne zmiany, możemy zainstalować wtyczki WordPress, które zmienią czcionki w Twojej witrynie.

Charakterystyka niestandardowych wtyczek czcionek

Oprogramowanie typu open source ma zalety leżące w interesie społeczności, a WordPress ma tę zaletę. Kilka wtyczek WordPress pozwala dodawać niestandardowe czcionki. Jak wybrać odpowiednią wtyczkę z tak wieloma? Jakie są funkcje niestandardowych wtyczek czcionek?

Oto kilka punktów, które należy wziąć pod uwagę:

  • Możliwość użycia niestandardowej czcionki
  • Możliwość użycia więcej niż jednej czcionki
  • Docelowe nagłówki i komponenty
  • Bonus: możliwość zmiany ustawień czcionek w edytorze wizualnym

To wszystko. Pierwsza funkcja na liście jest bardzo ważna. Zawsze możesz pobrać czcionki z witryn takich jak DaFont, Font Squirrel itp., Ale musisz mieć możliwość przesłania ich do WordPress.

Spójrzmy na kilka wtyczek do WordPress, które pozwalają przesyłać niestandardowe czcionki.

Niestandardowy program do przesyłania czcionek

Niestandardowy program do przesyłania czcionek

Ta wtyczka umożliwia pobieranie czcionek Google i stosowanie ich do różnych elementów bloga. Na przykład do nagłówków lub treści artykułu lub strony.

Użyj dowolnej czcionki

Użyj dowolnej czcionki

Jest to wtyczka WordPress, która zapewnia wygodny interfejs do pobierania czcionek i używania ich bezpośrednio za pomocą edytora wizualnego. Edytor wizualny WordPress może automatycznie zmieniać czcionkę dowolnego tekstu. Ta wtyczka oferuje kilka funkcji, co znacznie ułatwia zarządzanie dodawaniem niestandardowych czcionek.

WP Google Fonts

WP Google Fonts

WP Google Fonts umożliwia korzystanie z katalogu czcionek Google. Jedną z niesamowitych zalet tej wtyczki jest dodanie blisko 1000 czcionek Google. Chociaż możesz kolejkować czcionki Google ręcznie, o wiele łatwiej jest używać wtyczki dla większości użytkowników.

Jak zainstalować czcionki za pomocą wtyczki?

Weźmy na przykład WP Google Fonts. Wystarczy zainstalować tę wtyczkę z oficjalnego repozytorium WordPress i otworzyć sekcję Czcionki Google.

WP Google Fonts

Zobaczysz tutaj panel sterowania czcionkami Google. Wybierz czcionki i zmień różne ustawienia, takie jak styl czcionki, elementy, do których jest stosowana itp.

Opcja 2 – Zainstaluj niestandardowe czcionki WordPress ręcznie

Dzięki dyrektywie @ font-face możesz podłączyć jedną lub kilka czcionek do swojej witryny. Ale ta metoda ma swoje zalety i wady.

Plusy:

  • Za pomocą CSS możesz łączyć czcionki dowolnego formatu: ttf, otf, woff, svg.
  • Pliki czcionek będą znajdować się na twoim serwerze – nie będziesz zależeć od usług stron trzecich.

Cons:

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

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

Uwaga: Przed rozpoczęciem należy utworzyć motyw podrzędny dla swojej witryny. W ten sposób możesz wprowadzać wszystkie zmiany w motywie podrzędnym, pozostawiając motyw główny taktyczny, abyś mógł go łatwo aktualizować w razie potrzeby w przyszłości.

Krok 1: Utwórz folder „czcionek”

W ramach motywu podrzędnego utwórz nowy folder „czcionek” pod: wp-content / themes / your-child-theme / fonts

Krok 2. Prześlij pobrane pliki czcionek na swoją stronę internetową

Można to zrobić za pomocą panelu sterowania hostingu lub przez FTP.

Dodaj wszystkie pliki czcionek do nowo dodanego folderu czcionek: wp-content / themes / your-child-theme / fonts stworzyłeś.

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

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

@ font-face {
font-family: 'MyWebFont';
src: url ('fonts / WebFont.eot');
src: url ('fonts / WebFont.eot? #iefix') format ('embedded-opentype'),
format adresu URL („fonts / WebFont.woff”) („woff”),
format adresu URL („fonts / WebFont.ttf”) („truetype”),
format url („fonts / WebFont.svg # svgwebfont”) („svg”);
grubość czcionki: normalna;
styl czcionki: normalny;
}

Gdzie MyWebFont to nazwa czcionki, a wartością właściwości src (dane w nawiasach w cudzysłowie) jest ich lokalizacja (linki względne). Każdy styl musimy określić osobno.

Ponieważ po raz pierwszy łączymy normalny styl, ustawiamy grubość czcionki i właściwości stylu czcionki na normalną.

Krok 4. Podczas dodawania kursywa, napisz następujące:

@ font-face {
font-family: 'MyWebFont';
src: url ('fonts / WebFont-Italic.eot');
src: url ('fonts / WebFont-Italic.eot? #iefix') format ('embedded-opentype'),
format adresu URL („fonts / WebFont-Italic.woff”) („woff”),
format URL („fonts / WebFont-Italic.ttf”) („truetype”),
url („fonts / WebFont-Italic.svg # svgwebfont”) format („svg”);
grubość czcionki: normalna;
styl czcionki: kursywa;
}

Tam, gdzie wszystko jest takie samo, tylko kursor przypisaliśmy właściwość stylu czcionki.

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'),
format adresu URL („fonts / WebFont-Bold.woff”) („woff”),
format adresu URL („fonts / WebFont-Bold.ttf”) („truetype”),
url („fonts / WebFont-Bold.svg # svgwebfont”) format („svg”);
font-weight: pogrubiony;
styl czcionki: normalny;
}

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

Pamiętaj, aby wskazać 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'),
format URL („czcionki / WebFont-Italic-Bold.woff”) („woff”),
format URL („fonts / WebFont-Italic-Bold.ttf”) („truetype”),
format url („fonts / WebFont-Italic-Bold.svg # svgwebfont”) („svg”);
font-weight: pogrubiony;
styl czcionki: kursywa;
}

Cóż, to wszystko �� Teraz podłączyłeś cztery style czcionek do swojej witryny.

Ale jest jedna uwaga – to połączenie czcionek będzie niepoprawnie wyświetlane w Internet Explorerze 8. Pocieszeniem jest to, że bardzo niewiele osób nadal używa IE8.

Podsumowanie niestandardowych czcionek dla WordPress

Jaką pierwszą rzeczą zauważają użytkownicy odwiedzający Twoją witrynę? Racja, jego projekt! Większość projektów opiera się na prawidłowym użyciu pięknych czcionek. Musisz więc zadbać o wygląd czcionki swojej witryny. Dodaj kod lub użyj jednej z wyżej wymienionych wtyczek, aby osadzić nowy styl czcionki. Który sposób wybierzesz, zależy od ciebie.

Upewnij się, że nie używasz więcej niż dwóch czcionek w tej samej witrynie. Im więcej niestandardowych czcionek dodasz do witryny, tym wolniejsza staje się jej szybkość.

To wszystko, możesz komentować. 

Z przyjemnością dowiemy się również, jaką opcję dodać niestandardową czcionkę do swojej witryny i gdzie ją znaleźć.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me