Jak dodać niestandardowe czcionki do motywu WordPress?

Czcionki odgrywają ważną rolę w projektowaniu, czytelności, a czasem nawet funkcjonalności Twojej witryny. Wybierz niewłaściwą stronę, a możesz zrujnować to, co w przeciwnym razie byłoby świetnie wyglądającą witryną. Podobnie, zarówno styl, jak i rozmiar czcionki mogą decydować o tym, jak łatwo (lub inaczej!) korzystać z Twojej witryny. Ale co zrobić, jeśli idealna czcionka nie jest dostępna w motywie WordPress? W tym artykule przyjrzymy się kilku sposobom korzystania z wybranej czcionki niestandardowej.

Kontynuujmy!

Dlaczego warto korzystać z niestandardowych czcionek

Wiele motywów zawiera teraz wybór czcionek do wyboru, które są „zapieczone”. W wielu przypadkach są one odpowiednie dla projektowanej witryny. Ale jeśli nie jesteś w stanie wybrać odpowiedniej czcionki z czcionkami, które są już w ofercie, nadszedł czas, aby przyjrzeć się czcionkom alternatywnym, a to będzie oznaczać, że musisz mieć możliwość dodania własnych czcionek do swojej witryny.

Korzystanie z niestandardowych czcionek pozwala wykorzystać piękne połączenie różnych czcionek w witrynie, aby poprawić typografię i wrażenia użytkownika. Badania wykazały, że stosowanie odpowiedniej typografii przynosi znaczące korzyści. Obejmuje to nie tylko poprawę ogólnego doświadczenia użytkownika, ale nawet tego, jak dobrze informacje na stronie internetowej są przetwarzane przez mózg. Im jest to prostsze, tym łatwiej jest komunikować swoją ofertę biznesową/usługi swoim klientom.

Chociaż używanie niestandardowych czcionek może zdecydowanie poprawić użyteczność Twojej witryny, ważne jest, aby nie zwariować na punkcie czcionek! Wybór dwóch starannie dobranych czcionek powinien wystarczyć. Więcej i możesz zaryzykować spowolnienie swojej witryny.

Przyjrzyjmy się dostępnym opcjom dodawania niestandardowych czcionek do naszej witryny WordPress.

Dodaj czcionki Google za pomocą wtyczki Google Fonts

Najłatwiejszym i najpopularniejszym sposobem dodawania niestandardowych czcionek do witryny WordPress jest użycie wtyczki Easy Google Fonts.

Po zainstalowaniu i aktywacji tej wtyczki otwórz dostosowywanie motywów w menu Wygląd > Dostosuj. Zauważysz, że na lewym pasku bocznym dodano nowe menu rozwijane akordeonu o nazwie Typografia.

Kliknij, aby to otworzyć, a następnie możesz użyć przycisku „Edytuj czcionkę”, aby szybko zmienić czcionki witryny, a także ich wagę, czy są to wielkie litery itp. I nie tylko. Możesz także użyć właściwości CSS, aby dalej zmieniać stylizację i pozycjonowanie wybranych czcionek.

Ponadto możesz nawet dodać własne kontrolki czcionek. Aby to zrobić, przejdź do strony ustawień wtyczki w Ustawienia> Czcionki Google.

Utwórz nową kontrolkę czcionki i zdefiniuj selektory CSS. Na przykład ustawiamy klasy .entry-title , które odpowiadają tytułom postów naszego motywu. Następnie, gdy ponownie odwiedzisz dostosowywanie, pojawi się nowe pole o określonej nazwie, w którym możesz zastosować dostosowanie czcionki do tytułów postów w taki sam sposób, jak opisaliśmy powyżej. Łatwo!

Dodaj czcionki Google ręcznie

Jeśli wolisz nie używać wtyczki, ale nadal chcesz korzystać z czcionek Google w swojej witrynie WordPress, nie ma problemu. Można je stosunkowo łatwo dodać ręcznie. Zobaczmy jak. Oczywiście istnieje również ręczny sposób dodawania czcionek Google do Twojej witryny.

Krok pierwszy:

Najpierw musisz pobrać link do czcionki ze strony czcionek Google.

Załóżmy, że chcesz użyć rodziny czcionek Roboto. Po kliknięciu tej czcionki zostaniesz przeniesiony na jej stronę, na której możesz wyświetlić podgląd dowolnego tekstu, aby upewnić się, że czcionka Ci odpowiada. Po prawej stronie zobaczysz pole „Użyj w internecie”, które zawiera link, który musisz dodać do swojej witryny.

Aby poprawnie zakolejkować czcionki Google w WordPressie, otwórz plik functions.php motywu w swoim ulubionym edytorze i wstaw na końcu następujący kod:

 function my_google_fonts() { wp_enqueue_style( 'my-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap', false ); } add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );

Skopiuj adres URL podany w tekście linku Google (zaczynający się od https://), a następnie zastąp go w powyższym kodzie (w naszym przykładzie jest to obecnie https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap )

Następnie w pliku style.css motywu użyj czcionki w taki sam sposób, jak w przypadku każdej innej czcionki, zgodnie z „regułami CSS określającymi rodziny” dostarczonymi przez Google.

 h1, h2, h3 { font-family: 'Roboto', sans-serif; }

Teraz w interfejsie witryny powinieneś zobaczyć czcionkę Roboto nałożoną na obszary, w których została określona w pliku CSS.

Dodaj czcionki Adobe

Świetną alternatywą dla Google Fonts są czcionki Adobe Fonts. Wtyczka Custom Adobe Fonts ułatwia osadzenie tych czcionek w witrynie WordPress i obecnie współpracuje z motywem Astra, motywem Beaver Builder, wtyczką Beaver Builder i kreatorem stron Elementor.

Aby rozpocząć, zainstaluj wtyczkę, a następnie przejdź do obszernej biblioteki czcionek Adobe, aby znaleźć czcionkę, która Ci odpowiada (musisz się zarejestrować, aby się zalogować).

Istnieje mnóstwo sposobów filtrowania czcionek, a korzystanie z systemu jest dość intuicyjne. Gdy znajdziesz czcionkę, którą lubisz, kliknij ją i spójrz w prawym górnym rogu strony, gdzie zobaczysz napis „Dodaj do projektu internetowego”. Otworzy się pudełko takie jak to poniżej. Nadaj nazwę swojemu projektowi internetowemu i wybierz warianty czcionek, które chcesz w nim uwzględnić.

Gdy nadasz mu nazwę i naciśniesz przycisk „Utwórz”, zostaniesz przeniesiony do następnego ekranu, na którym znajduje się kod HTML i reguły CSS. Masz teraz dwie możliwości. Możesz a) kontynuować korzystanie z wtyczki Custom Adobe Fonts lub b) osadzić te czcionki ręcznie.

Korzystanie z niestandardowej wtyczki Adobe Fonts

To najłatwiejszy sposób na umieszczenie czcionek Adobe w witrynie. Po utworzeniu projektu kliknij „Projekty internetowe” i znajdź swój projekt na liście. Na górze zobaczysz kod „Project ID” (jak pokazano poniżej). Teraz przejdź do ustawień wtyczki Adobe Font i kliknij w menu „Niestandardowe czcionki Typekit”. Wprowadź ten identyfikator projektu w tym polu i zapisz.

Zobaczysz teraz tę czcionkę na liście w WordPress Customizer, Elementorze lub innym kompatybilnym narzędziu do tworzenia stron, którego używasz. Wybierz i gotowe.

Ręczne osadzanie niestandardowych czcionek

Ręczne osadzanie czcionek Adobe odbywa się dokładnie w taki sam sposób, jak opisano w przypadku osadzania czcionek Google. Zobaczysz łącze do osadzenia arkusza stylów dostarczone przez firmę Adobe (pokazane poniżej) w przeglądzie programu Web Project. Aby wyświetlić klasy CSS, kliknij tekst „Edytuj projekt”, który jest wyświetlany obok każdego stylu czcionki.

Jak znaleźć niestandardowe czcionki i je sparować?

Możesz także znaleźć i pobrać idealną czcionkę dla swojej witryny i załadować ją z folderów witryny, ponieważ istnieje wiele zasobów oferujących bezpłatne lub premium czcionki w dużej różnorodności.

Możesz również uzyskać pomoc od narzędzia online Parowanie czcionek, które doskonale nadaje się do wyświetlania podglądu kombinacji czcionek, dzięki czemu możesz mieszać i dopasowywać czcionki według własnego uznania. Sposób, w jaki przedstawia pary czcionek, ułatwia również wyszukiwanie innych sugestii dotyczących parowania, przeglądając.

Na naszym blogu znajdziesz również dwa świetne artykuły na temat parowania czcionek. Jest przewodnik po parowaniu czcionek dla projektantów stron internetowych + 30 niesamowitych przykładów! jeśli chcesz dowiedzieć się więcej na temat parowania czcionek pod kątem projektowania, korzystając z doskonałych porad dotyczących tego, na co należy położyć nacisk i jak osiągnąć najlepszą czytelność i odczucia. Więcej informacji na temat narzędzi do parowania czcionek można znaleźć w naszym artykule 10 najlepszych narzędzi do parowania czcionek dla projektantów stron internetowych.

Załaduj niestandardowe czcionki z folderów

Chociaż Google Fonts i Adobe Fonts oferują niesamowity wybór do wyboru oraz łatwy sposób ich wykorzystania w witrynie, nie jest to jedyna dostępna opcja w poszukiwaniu idealnej czcionki.

Istnieje kilka doskonałych stron internetowych, które sprzedają niestandardowe czcionki, które zostały starannie stworzone przez projektantów. Na przykład Font Squirrel oferuje dużą bibliotekę czcionek i, co najważniejsze, umożliwia komercyjne wykorzystanie i łatwy do wdrożenia format tych czcionek. Na stronie znajduje się mieszanka darmowych i „premium” czcionek (za które trzeba zapłacić).

Jedną z doskonałych czcionek, które warto wziąć pod uwagę od Font Squirrel, jest Fira Sans. Użyjmy tego jako przykładu, aby dowiedzieć się, jak zainstalować go na naszej stronie WordPress do użytku.

Najpierw kliknij kartę „Zestaw czcionek internetowych”. Zaznacz pole „WOFF”, a następnie kliknij „Pobierz zestaw @Font-Face”.

Otrzymasz plik zip, który należy teraz rozpakować. W tym folderze znajdziesz plik czcionki wraz z plikiem stylesheet.css, który zawiera kod potrzebny do własnego arkusza stylów CSS.

Na przykład w przypadku czcionki OpenSans-ExtraBold-webfont musimy użyć następującego kodu CSS:

 @font-face { font-family: 'open_sansextrabold'; src: url('OpenSans-ExtraBold-webfont.eot'); src: url('OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-ExtraBold-webfont.woff2') format('woff2'), url('OpenSans-ExtraBold-webfont.woff') format('woff'), url('OpenSans-ExtraBold-webfont.ttf') format('truetype'), url('OpenSans-ExtraBold-webfont.svg#open_sansextrabold') format('svg'); font-weight: normal; font-style: normal; }

Najlepszym rozwiązaniem jest umieszczenie wszystkich plików czcionek we wszystkich formatach w odpowiednim, wybranym przez siebie katalogu, w folderze motywu. W naszym przykładzie znajduje się on w folderze /wp-content/themes/twentytwenty/assets/fonts/open-sans/ .

Wewnątrz tego samego folderu utwórz plik open-sans.css i umieść wewnątrz całego kodu CSS każdego pliku stylesheet.css, aby jego zawartość wyglądała tak:

 @font-face { font-family: 'open_sansbold'; src: url('OpenSans-Bold-webfont.eot'); src: url('OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-Bold-webfont.woff') format('woff'), url('OpenSans-Bold-webfont.ttf') format('truetype'), url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'open_sansbold_italic'; src: url('OpenSans-BoldItalic-webfont.eot'); src: url('OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-BoldItalic-webfont.woff') format('woff'), url('OpenSans-BoldItalic-webfont.ttf') format('truetype'), url('OpenSans-BoldItalic-webfont.svg#open_sansbold_italic') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'open_sansextrabold'; src: url('OpenSans-ExtraBold-webfont.eot'); src: url('OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-ExtraBold-webfont.woff') format('woff'), url('OpenSans-ExtraBold-webfont.ttf') format('truetype'), url('OpenSans-ExtraBold-webfont.svg#open_sansextrabold') format('svg'); font-weight: normal; font-style: normal; }

Pomaga to również różnym przeglądarkom wybrać obsługiwaną czcionkę. Jeśli potrzebujesz kolejkować plik CSS czcionek w sposób WordPress, powinieneś to zrobić w functions.php w ten sposób:

 function my_custom_fonts() { wp_enqueue_style( 'my-custom-fonts', get_template_directory_uri() . '/assets/fonts/open-sans/open-sans.css', false ); } add_action( 'wp_enqueue_scripts', 'my_custom_fonts' );

Nie zapomnij zastąpić adresu URL ścieżką do pliku open-sans.css.

Wniosek

Wybór odpowiedniej czcionki podczas budowania witryny ma znaczący wpływ na wygląd i działanie witryny. Przy tak wielu niesamowitych czcionkach do wyboru nie musisz trzymać się tylko czcionek dostarczonych przez Twój motyw. Mamy nadzieję, że ten artykuł pokazuje, w jaki sposób możesz użyć dowolnej odpowiedniej czcionki dla swojej witryny WordPress!