W artykule:
Czcionki Google są niesamowitym darmowym zasobem dla projektantów stron internetowych. W WPBv4 zaczęliśmy używać popularnej kombinacji czcionek Google: Oswald i Lora. Niektórzy z naszych użytkowników zapytali nas, jak dodać czcionki internetowe Google w motywach WordPress. Jeśli pamiętasz, pokazaliśmy, jak dodać czcionki Google w edytorze postów WordPress. W tym artykule pokażemy, jak dodać czcionki internetowe Google do motywów WordPress RIGHT way, zoptymalizowany pod kątem wydajności.
Znajdź czcionki internetowe Google, które Ci się podobają
Pierwszą rzeczą, którą musisz zrobić, to znaleźć czcionkę Google, która Ci się podoba. Przejdź do Google fonts i przeglądaj bibliotekę. Gdy znajdziesz czcionkę, która Ci się podoba, kliknij na „Quick-use” guzik.
Po kliknięciu przycisku szybkiego użycia zostaniesz przeniesiony na nową stronę. Przewiń w dół, aż zobaczysz pole instrukcji użytkowania z kodem, który możesz dodać do swojej witryny.
Zobaczysz, że istnieją trzy różne karty do dodawania czcionki do witryny. Pierwszym z nich jest standardowa i zalecana metoda dodawania czcionek Google do witryny. Druga zakładka wykorzystuje metodę @ import CSS, a ostatnia zakładka wykorzystuje metodę JavaScript.
Pokażemy Ci, jak korzystać z każdej z tych metod i jakie są plusy i minusy.
Dodawanie czcionek internetowych Google w motywach WordPress
Najczęściej widzieliśmy ludzi używających dwóch pierwszych metod.
Najprostszym sposobem byłoby otwarcie motywu styl.css plik i wklej kod czcionki, który masz w zakładce @ import, w ten sposób:
@ import url(https://fonts.googleapis.com/css?family=Lora); @ import url(https://fonts.googleapis.com/css?family=Oswald);
Można również połączyć wiele żądań czcionek w jeden. Oto jak byś to zrobił:
@ import url(https://fonts.googleapis.com/css?family=Lora/Oswald);
Ta metoda jest bardzo łatwa, ale nie jest to najlepszy sposób dodawania czcionek Google do swojej witryny WordPress. Użycie metody @ import blokuje pobieranie równoległe, co oznacza, że przeglądarka będzie czekać, aż importowany plik zakończy pobieranie, zanim rozpocznie pobieranie reszty zawartości.
Jeśli musisz użyć @import, to przynajmniej połącz kilka żądań w jedno.
Zoptymalizowana metoda dodawania czcionek internetowych Google
Najlepszym sposobem dodawania czcionek Google jest użycie standardowej metody, która wykorzystuje metodę łącza zamiast metody importu. Po prostu weź adres URL czcionki, który otrzymałeś z kroku 1. Jeśli dodajesz wiele czcionek, możesz połączyć te dwie czcionki ze znakiem|. Następnie umieść kod w sekcji head Twojego motywu.
Najprawdopodobniej będziesz musiał edytować swój nagłówek.php plik i wklej poniższy kod nad głównym arkuszem stylów. Przykład wyglądałby tak:
< link rel = "stylesheet" type = "text / css" href="https://fonts.googleapis.com/css?family=Lora/Oswald" media = "screen"> < link rel = "stylesheet" type = "text / css" href = "your theme STYLESHEET"media= "screen">
Zasadniczo celem jest jak najwcześniejsze umieszczenie żądania czcionki. Zgodnie z blogiem Google Web Fonts, jeśli przed deklaracją @font-face znajduje się znacznik skryptu, Internet Explorer nie wyrenderuje niczego na stronie, dopóki plik czcionki nie zostanie pobrany.
Gdy to zrobisz, możesz po prostu zacząć używać go w pliku CSS motywu w ten sposób:
h1 {
rodzina czcionek: 'Oswald', Helvetica, Arial, serif;
}
Teraz istnieje wiele ram tematycznych i motywów potomnych. Nie zaleca się modyfikowania plików motywu nadrzędnego, szczególnie jeśli używasz struktury motywu, ponieważ zmiany zostaną nadpisane przy następnej aktualizacji tej struktury. Będziesz musiał użyć haczyków i filtrów przedstawionych przez ten motyw nadrzędny lub strukturę, aby poprawnie dodać czcionki Google do motywów podrzędnych.
Prawidłowe zapytanie Google Fonts w WordPress
Innym sposobem dodawania czcionek Google do witryny WordPress jest Zapytanie o czcionkę w funkcjach szablonu.plik php lub wtyczka specyficzna dla witryny.
function wpb_add_google_fonts () {
wp_enqueue_style ('wpb-Google-fonts', 'https://fonts.googleapis.com/css?family=Open + Sans: 300italic,400italic,700italic,400,700, 300', false );
}
add_action ('wp_enqueue_scripts', 'wpb_add_google_fonts');
Nie zapomnij zastąpić linku czcionki własnym.
Wczytywanie Czcionek Google Przy Użyciu JavaScript
W tym celu należy skopiować kod z zakładki JavaScript w sekcji Instrukcje użytkowania Google fonts. Możesz wkleić ten kod do nagłówka motywu lub motywu podrzędnego.plik php bezpośrednio po znaczniku < head>.
Naszą ostatnią wskazówką na używanie czcionek internetowych Google na twojej stronie byłoby nie Ładowanie czcionek, których nie używasz. Na przykład, jeśli chcesz tylko pogrubioną i normalną wagę, nie dodawaj wszystkich innych stylów.
Mamy nadzieję, że ten artykuł pomógł Ci dodać czcionki internetowe Google do motywów WordPress we właściwy sposób, aby Twoja witryna mogła się szybko załadować. Możesz również zapoznać się z naszym przewodnikiem na temat dodawania czcionek Typekit w WordPress.
Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.
