Jak przesyłać niestandardowe czcionki w WordPressie

Opublikowany: 2021-08-19

Niestandardowe czcionki

Osoby często zamierzają przesyłać niestandardowe czcionki do WordPressa, ale utknęły w procedurze.

Twój blog lub witryna wyróżnia się i odświeża, gdy używasz niestandardowych czcionek. Wraz z ewolucją wtyczek i motywów powszechnym trendem stało się używanie niestandardowych czcionek w witrynach opartych na WordPressie.

Z powodu nadmiernego popytu publicznego istnieje kilka motywów, które są fabrycznie wyposażone w setki czcionek w samym motywie. Chociaż musisz wiedzieć, że używanie wielu czcionek w jednej witrynie może spowolnić szybkość witryny.

W tym artykule omówiliśmy metody dodawania niestandardowych czcionek w WordPress za pomocą Type Kit, Google Fonts i CSS3. Poinformujemy Cię również o prawidłowym sposobie korzystania z witryny, aby nie spowalniała przy użyciu niestandardowych czcionek. Zacznijmy od podstaw i dowiedzmy się, jak znaleźć niestandardowe czcionki dla swojej witryny WordPress.

Znajdowanie niestandardowych czcionek dla WordPress

Był czas, kiedy nawet czcionki były drogie. Ale dzisiaj tak nie jest. Świetne bezpłatne czcionki internetowe można pobrać z wielu miejsc, takich jak FontSquirrel, TypeKit, Google Fonts i fonts.com. Zalecamy wypróbowanie pary czcionek, jeśli masz trudności z dopasowaniem i mieszaniem czcionek. Projektanci używają go do łączenia najlepszych czcionek Google.

Aby utrzymać szybkość witryny i zapobiec spowolnieniu, użyj dwóch niestandardowych czcionek w całym projekcie witryny. Robiąc to, dodasz również czynnik spójności do swojego projektu.

Użyj Google Fonts do przesyłania niestandardowych czcionek w WordPress

Bezpłatną, najpowszechniejszą i największą biblioteką czcionek używaną przez programistów jest Google Fonts. Poniżej przedstawiono wiele sposobów przesyłania czcionek Google na platformę WordPress.

Użyj wtyczki Google Fonts

Najłatwiejszą i najbardziej zalecaną metodą dla początkujących, którzy zamierzają korzystać z Google Fonts i przesyłać niestandardowe czcionki w WordPressie, jest ta wtyczka.

Pobierz wtyczkę Easy Google Fonts, a następnie zainstaluj ją i aktywuj. Po aktywacji przejdź do strony konfiguratora z sekcji wygląd w celu przeprowadzenia dalszego procesu. Tutaj otworzy się sekcja dostosowywania motywu na żywo, w której będziesz mógł zobaczyć nową sekcję, tj. Typografia.

Łatwe czcionki Google
Łatwe czcionki Google

W tej sekcji możesz dowiedzieć się o różnych sekcjach, w których możesz zastosować czcionki Google. Kliknięcie opcji Edytuj czcionkę pozwoli Ci użyć niestandardowych czcionek w Twojej witrynie. Możliwe są również inne dostosowania czcionek, takie jak styl, rozmiar, margines, dopełnienie i inne.

W zależności od używanego motywu liczba wybranych czcionek i zastosowanie czcionek może być ograniczone do określonych obszarów. Jako rozwiązanie tego problemu możesz tworzyć niestandardowe kontrolki i używać ich w swojej witrynie. Aby to zrobić, odwiedź stronę Czcionki Google w Ustawieniach i podaj nazwę kontrolki czcionki.

Będziesz musiał wprowadzić selektory CSS po kliknięciu przycisku tworzenia czcionki. Możesz także użyć klas CSS lub elementów HTML. Aby zapisać ustawienia, kliknij Zapisz kontrolę czcionki.

Dla różnych sekcji witryny możesz utworzyć dowolną liczbę kontrolerów czcionek. Aby sprawdzić utworzone wcześniej niestandardowe kontrolki czcionek, przejdź do opcji Typografia i wybierz Typografia motywu. Możesz edytować dowolne kontrolery w dowolnym momencie.

Dodaj czcionki Google ręcznie

Użyj dowolnej czcionki

Aby przesłać niestandardowe czcionki w WordPressie, musisz dodać kod w pliku motywu. Wybierz czcionkę z biblioteki czcionek Google, której chcesz użyć, i użyj przycisku szybkiego użycia znajdującego się poniżej. W celu wyboru stylów czcionek zostaniesz przekierowany na inną stronę.

Wybieraj tylko te style czcionek, których używasz na pewno. Przewijając w dół, dojdziesz do sekcji osadzonego kodu. Skopiuj osadzony kod pod standardową zakładką i wklej go do pliku header.php motywu.

Jest to prosta procedura ręcznego dodawania czcionek Google w witrynie WordPress. Czcionki te mogą być również używane w arkuszu stylów motywów.

Użyj Typekit, aby przesłać niestandardowe czcionki do WordPress

Czcionki Typekit dla WordPress

Zasoby premium i bezpłatne czcionki do wykorzystania w projektach to Typekit. Jest dostarczany z ograniczonym bezpłatnym planem subskrypcji, a także z planem premium do wyboru przez użytkowników. Po zarejestrowaniu konta Typekit będziesz musiał utworzyć nowy zestaw.

W kolejnych krokach wybierz czcionkę z biblioteki Typekit, a następnie dodaj ją do swojego zestawu. Po skopiowaniu kodu do osadzenia zestawu przejdź do obszaru administracyjnego witryny WordPress.

Tutaj musisz pobrać czcionki Typekit dla wtyczki WordPress, a następnie zainstalować i aktywować. Po aktywacji odwiedź Czcionki Typekit w Ustawieniach i wklej kod do osadzenia na stronie ustawień wtyczki. Otóż ​​to. Możesz już iść.

Aby użyć czcionki Typekit w arkuszu stylów WordPress, postępuj zgodnie z poniższymi kodami:

h1 .tytuł-witryny { 
rodzina czcionek: 'modesto-skondensowane', Arial, bezszeryfowe; 
}

Użyj CSS3 @font-face, aby przesłać niestandardowe czcionki w WordPress

Jest to bezpośrednia metoda dodawania niestandardowych czcionek. Dowolna czcionka, którą lubisz, może być używana w Twojej witrynie za pomocą tej metody.

W pierwszym kroku pobierz wybraną czcionkę w formacie internetowym. Możesz użyć konwertera, takiego jak FontSquirrel Webfont generator, jeśli nie możesz znaleźć formatu internetowego dla swoich czcionek. Prześlij format internetowy swoich czcionek na serwer hostingowy, gdy tylko go otrzymasz.

W swoim motywie lub motywie potomnym utwórz folder „nowy” w folderze „czcionki”, a następnie prześlij własne czcionki. Aby przesłać czcionkę, użyj menedżera plików lub FTP swojego cPanel. Załaduj czcionkę do arkusza stylów motywów w następujący sposób:

@font-face {
    rodzina czcionek: nazwa czcionki;  
    src: url(http://www.sktthemes.org/skt-content/themes/your-theme/fonts/fontname-Regular.ttf);  
    grubość czcionki: normalna;  
}

Zmodyfikuj i zastąp rodzinę czcionek i adres URL w powyższym kodzie. Aby użyć w arkuszu stylów, postępuj zgodnie z poniższą metodą.

.h1 tytuł-witryny { 
rodzina czcionek: "nazwa_czcionki", Cambria,bezszeryfowa; 
}

Ładowanie czcionek bezpośrednio tą metodą nie jest najlepszym rozwiązaniem. Najlepiej podawać czcionkę bezpośrednio z serwera lub z optymalną wydajnością Typekit lub Google Fonts.

Wniosek

Omówiliśmy wszystkie możliwe i najlepsze sposoby przesyłania niestandardowych czcionek do WordPressa w celach informacyjnych i do użytku. Mam nadzieję, że ci to pomoże.

Powiązane artykuły

Fantazyjne czcionki w WordPressie

Czcionki Google używają bezpośrednio lub za pomocą wtyczki