Jak dodać czcionkę offline do swojej witryny WordPress?

Jeśli chcesz dodać trochę osobowości do swojej witryny WordPress, możesz rozważyć załadowanie czcionki offline. Chociaż można to zrobić na wiele sposobów, pokażemy Ci jedną z najłatwiejszych metod za pomocą Generatora czcionek internetowych Font Squirrel. Po pobraniu plików czcionek możesz przesłać je do witryny WordPress i używać ich tak samo, jak każdej innej czcionki. Zacznijmy!

Ten artykuł leżał na moim biurku od dłuższego czasu i chciałem się nim z wami podzielić. Czcionki Google są w pełni ładowane lokalnie. Do tej pory używałem czcionek Google Oswald i Lato z Crunchify.com. Po prostu otwórz adres URL na powyższym obrazku, który pojawia się w nowej karcie, a zauważysz, że wygenerował 14 nowych czcionek . Ten samouczek pomoże również, jeśli masz jakiekolwiek z poniższych pytań. Po rozpakowaniu pliku Lato.zip będziesz mógł zobaczyć wszystkie dziesięć czcionek Lato z rozszerzeniem.ttf. Na większości stron internetowych potrzebujesz tylko zwykłych, pogrubionych i kursywnych czcionek.

W kroku 2 musisz teraz przekonwertować czcionki do formatów woff2, eot,svg, ttf i wof. Plik można przesłać na stronę https://Font-Converter.net/en , który przekonwertuje czcionkę do tych formatów. Nic więcej nie trzeba mówić. Możesz teraz ładować czcionki z lokalnego systemu plików.

Jak dodać niestandardowe czcionki do motywu WordPress?

Istnieje kilka różnych sposobów dodawania niestandardowych czcionek do motywu WordPress. Jednym ze sposobów jest skorzystanie z biblioteki Google Fonts. Pełną listę wszystkich dostępnych czcionek można znaleźć w witrynie Google Fonts. Po znalezieniu czcionki, która Ci się podoba, możesz dodać kod do arkusza stylów motywu (style.css). Na przykład, jeśli chcesz użyć czcionki „Open Sans”, dodaj następujący kod do arkusza stylów: body { font-family: 'Open Sans', sans-serif; } Innym sposobem dodania niestandardowych czcionek do motywu WordPress jest użycie wtyczki, takiej jak Easy Google Fonts . Ta wtyczka ułatwia dodawanie niestandardowych czcionek do motywu bez konieczności edytowania kodu.

Wtyczka Easy Google Fonts może służyć do dodawania niestandardowych czcionek do witryny WordPress. Korzystając z tej metody będziesz mógł zwrócić uwagę na swoją stronę internetową za pomocą szerokiej gamy czcionek. Wykazano, że typografia ma wiele zalet w badaniach. Prosta strona internetowa ułatwia klientom komunikację z Tobą. Korzystając z właściwości CSS, możesz zmienić stylizację i położenie preferowanej czcionki, a także zmienić jej stylizację i położenie. Oprócz własnych kontrolek czcionek możesz użyć strony ustawień wtyczki WordPress, aby je dodać. Jeśli nie chcesz używać wtyczki, możesz użyć tej zamiast czcionek Adobe.

Zainstaluj wtyczkę Custom Adobe Fonts, aby ułatwić włączenie tych czcionek do witryny WordPress. Zainstaluj wtyczkę, a następnie przejdź do obszernej biblioteki czcionek Adobe, aby znaleźć czcionkę, która będzie dla Ciebie odpowiednia (musisz się zarejestrować, aby z niej korzystać). Po wybraniu czcionki kliknij ją, a następnie wyszukaj w prawym górnym rogu strony opcję „Dodaj do projektu internetowego”. Korzystając z Pary czcionek, możesz zobaczyć, jak wyglądają kombinacje czcionek, a także mieszać i dopasowywać czcionki na podstawie tego, co widzisz. Istnieje kilka doskonałych stron internetowych, które sprzedają niestandardowe czcionki, które zostały stworzone przez samego projektanta. Do czcionki Squirrel dołączona jest duża biblioteka czcionek, która jest również łatwa do zaimplementowania. Możesz użyć zestawu czcionek internetowych @Font-Face.

Twoja witryna WordPress powinna być teraz gotowa do użycia. Zestaw zawiera plik czcionek oraz arkusz stylów zawierający kod potrzebny do utworzenia własnego arkusza stylów CSS. Na przykład musielibyśmy użyć następującego kodu CSS dla czcionki internetowej OpenSans-ExtraBold-. Najlepszym rozwiązaniem jest zapisanie wszystkich plików czcionek w wybranej lokalizacji.

Jak załadować czcionki Google w WordPress

Przejdź do panelu administracyjnego WordPress i wybierz Dodaj nowy. Pobierz i zainstaluj Easy Google Fonts ze sklepu Google Play. Po zainstalowaniu wtyczki musisz kliknąć przycisk Aktywuj, aby zacząć z niej korzystać.

W swojej witrynie lub produktach cyfrowych możesz używać czcionek Google, aby eksperymentować z ponad 1000 różnymi rodzinami czcionek. Jeśli chcesz ręcznie dodać czcionki Google do swojej witryny WordPress, istnieje kilka opcji. Są bezpłatne i otwarte, więc mogą z nich korzystać każdy programista. Najwygodniejszym sposobem integracji czcionek Google jest dołączenie fragmentu kodu z adresem URL do określonej rodziny czcionek w pliku functions.php. Jeśli uważasz, że proces ręczny jest trudny, możesz użyć wtyczki. Możesz najpierw zainstalować wtyczkę, odwiedzając repozytorium wtyczek WordPress. Musi być teraz zainstalowany i aktywowany.

Większość motywów WordPress zawiera integrację czcionek Google w ramach ustawień domyślnych. Wtyczki tworzące platformę OMGF umożliwiają przeglądanie ponad 600 czcionek w Twojej witrynie. W menu rozwijanym „Rodzina czcionek” możesz wybierać spośród ponad 100 różnych typów dla różnych sekcji witryny. Istnieje kilka opcji dodawania niestandardowych kontrolek czcionek , jak pokazano na podglądzie dostosowania.

Czy powinienem ładować czcionki Google lokalnie WordPress?

Jeśli Twoja witryna WordPress zawiera błędy Google Font, powinieneś załadować czcionki Google lokalnie, aby je rozwiązać. Istnieją zewnętrzne zasoby i skrypty, których nie można kontrolować, co uniemożliwia ich kompresję, minimalizację lub optymalizację. Twoja prędkość WordPressa będzie poważnie utrudniona, jeśli nie podejmiesz tych środków ostrożności.

Wp-treść/motywy/twój-motyw/czcionki

Folder wp-content/themes/your-theme/fonts to miejsce, w którym możesz przechowywać dowolne niestandardowe czcionki, których chcesz użyć w swoim motywie. Czcionki można dodawać do tego folderu przez FTP lub za pomocą wtyczki menedżera plików. Po dodaniu czcionek do tego folderu można ich używać w CSS motywu, odwołując się do nazwy czcionki.

Style globalne można wykorzystać do zmiany czcionki witryny, jeśli korzysta z jednego z poniższych motywów. W takim przypadku czcionka podstawowa i nagłówki są w tej samej parze czcionek. Aby zapisać nowe pary czcionek, kliknij przycisk Publikuj w menu Style globalne lub kliknij Resetuj, aby cofnąć zmiany. Po wybraniu odpowiednich czcionek niestandardowych możesz je zmieniać tak często, jak chcesz. Jeśli chcesz zmienić rozmiar nagłówka lub czcionek podstawowych, możesz to zrobić, wybierając opcję rozmiaru poniżej i po prawej stronie każdej czcionki, a następnie wybierając rozmiar z menu rozwijanego. Za pomocą niestandardowego CSS możesz zmienić globalny domyślny rozmiar czcionki. Upewnij się, że dezaktywujesz lub usuwasz wtyczkę, jeśli zdecydujesz się przestać jej używać po jej przetestowaniu. Nie można połączyć konta Typekit.com z blogiem lub witryną WordPress.com. Jeśli chcesz przetestować zgodność określonej czcionki z danym językiem, użyj narzędzia Customizer.

Dodaj czcionki do WordPressa bez wtyczki

Istnieje kilka sposobów dodawania czcionek do WordPressa bez wtyczki. Jednym ze sposobów jest skorzystanie z biblioteki Google Fonts. Po prostu przejdź do witryny Google Fonts, wybierz czcionkę, której chcesz użyć, a następnie skopiuj dostarczony kod. Następnie otwórz pulpit nawigacyjny WordPress i przejdź do Wygląd> Dostosuj. Następnie kliknij zakładkę „Dodatkowy CSS” i wklej kod skopiowany z Google Fonts. Zapisz zmiany, a nowa czcionka zostanie zastosowana w Twojej witrynie.

Motywy nie muszą zawierać czcionek internetowych w swoich domyślnych ustawieniach. Podczas przeglądania strony internetowej będziesz mógł ją pobrać za pomocą przeglądarki. Aby skopiować i wkleić kod czcionki do pliku motywu, po prostu wybierz żądaną czcionkę. Możesz używać wielu czcionek jednocześnie, a zobaczysz, jak długo ładują się czcionki. Dodaj więcej CSS do swojego bloga WordPress, przechodząc do pulpitu nawigacyjnego bloga WordPress. Skopiuj cały kod z szarego pola 1 do czcionki internetowej tekstu podstawowego. Nową rodzinę czcionek internetowych można znaleźć w drugim szarym polu biblioteki czcionek Google . Ponadto poniższy kod może służyć do dostosowania rozmiaru i grubości czcionki.