Jak dodawać czcionki internetowe Google w motywach WordPress we właściwy sposób

Czcionki Google to niesamowite bezpłatne zasoby 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 pytali nas, jak dodawać czcionki internetowe Google w motywach WordPress. Jeśli pamiętasz, pokazaliśmy, jak dodawać czcionki Google w edytorze postów WordPress. W tym artykule pokażemy, jak dodawać czcionki internetowe Google do motywów WordPress Właściwy sposób, zoptymalizowany pod kątem wydajności.


Znajdź czcionki Google, które Ci się podobają

Pierwszą rzeczą, którą musisz zrobić, to znaleźć czcionkę Google, którą lubisz. Udaj się do czcionek Google i przeglądaj bibliotekę. Gdy znajdziesz czcionkę, którą lubisz, kliknij „Szybki w użyciu” przycisk.

Szybkie korzystanie z czcionek Google Fonts

Po kliknięciu przycisku szybkiego użycia nastąpi przejście do nowej strony. Przewiń w dół, aż zobaczysz pole instrukcji użytkowania z kodem, który możesz dodać do swojej witryny.

Kod osadzania czcionek Google

Zobaczysz, że istnieją trzy różne zakładki do dodawania czcionki do twojej witryny. Pierwszy to standardowa i zalecana metoda dodawania czcionek Google do Twojej 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 oraz jakie są zalety i wady.

Film instruktażowy

Subskrybuj WPBeginner

Jeśli film Ci się nie podoba lub potrzebujesz więcej instrukcji, czytaj dalej.

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 style.css plik i wklej kod czcionek, który masz na karcie @import, w następujący sposób:

@import url (https://fonts.googleapis.com/css?family=Lora);
@import url (https://fonts.googleapis.com/css?family=Oswald);

Możesz także łączyć wiele żądań czcionek w jedno. Oto jak to zrobiłbyś:

@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 witryny WordPress. Użycie metody @import blokuje równoległe pobieranie, co oznacza, że ​​przeglądarka zaczeka na zakończenie pobierania importowanego pliku, zanim rozpocznie pobieranie pozostałej zawartości.

Jeśli MUSISZ użyć @import, to przynajmniej połącz wiele żądań w jedno.

Zoptymalizowana pod względem wydajności metoda dodawania czcionek internetowych Google

Najlepszym sposobem dodawania czcionek Google jest użycie metody Standard, która wykorzystuje metodę link zamiast metody importowania. Wystarczy pobrać adres URL czcionki uzyskany w kroku 1. Jeśli dodajesz wiele czcionek, możesz połączyć te dwie czcionki za pomocą | postać. Następnie umieść kod w sekcji głównej motywu.

Najprawdopodobniej będziesz musiał edytować plik header.php i wkleić następujący kod nad głównym arkuszem stylów. Przykład wyglądałby tak:

Zasadniczo celem jest jak najszybsze umieszczenie żądania czcionki. Według bloga Google Web Fonts, jeśli przed deklaracją @ font-face znajduje się tag skryptu, to Internet Explorer nie renderuje niczego na stronie, dopóki pobieranie pliku czcionek nie zostanie zakończone.

Gdy to zrobisz, możesz po prostu zacząć używać go w pliku CSS motywu w następujący sposób:

h1 {
rodzina czcionek: „Oswald”, Helvetica, Arial, serif;
}

Obecnie istnieje wiele ram motywów i motywów potomnych. NIE jest zalecane modyfikowanie plików motywu nadrzędnego, szczególnie jeśli używasz frameworka motywu, ponieważ zmiany zostaną zastąpione przy następnej aktualizacji tej frameworku. Będziesz musiał użyć haczyków i filtrów przedstawionych ci przez ten motyw lub strukturę nadrzędną, aby poprawnie dodać czcionki Google w motywach podrzędnych.

Prawidłowe kolejkowanie czcionek Google w WordPress

Innym sposobem dodawania czcionek Google do witryny WordPress jest umieszczanie w kolejce czcionek w pliku functions.php motywu lub wtyczce specyficznej dla witryny.

funkcja wpb_add_google_fonts () {

wp_enqueue_style („wpb-google-fonts”, „https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic400,700,300 ‘, false);
}

działanie dodatkowe („wp_enqueue_scripts”, „wpb_add_google_fonts”);

Nie zapomnij zastąpić linku do czcionki własnym.

Ładowanie czcionek Google za pomocą JavaScript

W przypadku tej metody musisz skopiować kod z karty JavaScript w sekcji instrukcji użytkowania czcionek Google. Możesz wkleić ten kod do pliku header.php motywu podrzędnego lub bezpośrednio po tagu.

Naszą ostatnią wskazówką dotyczącą używania czcionek internetowych Google w Twojej witrynie byłoby nie ładowanie czcionek, których nie używasz. Na przykład, jeśli chcesz tylko odważnej i normalnej wagi, nie dodawaj wszystkich innych stylów.

Mamy nadzieję, że ten artykuł pomógł Ci w prawidłowym dodaniu czcionek internetowych Google do motywów WordPress, dzięki czemu Twoja strona może się szybko ładować. Możesz także zapoznać się z naszym przewodnikiem na temat dodawania czcionek Typekit w WordPress.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map