Jak korzystać z pobranych czcionek w WordPress bez wtyczki?

Czcionki Google to niesamowity zasób. Zanim było to tak powszechne, tworzenie stron internetowych, które używały unikalnych czcionek, było prawdziwym bólem. Teraz jednak po kilku kliknięciach i jednym fragmencie kodu Twoja witryna zmieni się z Helvetic-eh na Helvetic-awesome . Ale co, jeśli czcionka, którą kochasz, nie należy do rodziny czcionek Google? Musisz wiedzieć, jak korzystać z pobranych czcionek, ponieważ odkryłeś fantastyczną czcionkę hipster, która przemawia do duszy twojej brody.

Korzystanie z pobranej czcionki w witrynie nie jest tak proste, jak kliknięcie-kliknij-wklej-wklej. Pamiętaj, że nie jest to trudny proces, a przeprowadzę Cię przez to, abyś nigdy, przenigdy nie miał strony internetowej Helvetic-eh .

Teraz chcę zaznaczyć, że możesz to zrobić za pomocą wtyczki. W repozytorium dostępnych jest kilka. Ale dlaczego mielibyśmy to robić? Jestem typem faceta, który woli unikać używania wtyczki, gdy kilka linijek kodu zrobi to samo. Nadmiar wtyczek powoduje mnóstwo rozrostu, niepotrzebnych żądań HTTP i spowalnia witrynę.

Zamierzamy więc zaimportować te czcionki ręcznie – jakby znowu były późne lata 90-te. Ooo tak.

Wybór i pobieranie czcionki

Jestem wielkim fanem przeglądów czcionek. Eleganckie motywy mają mnóstwo, które możesz przeglądać, aby zobaczyć, co lubisz. Więc uderz w niektóre z nich i zobacz, co lubisz.

• Czcionki pisma ręcznego
• Czcionki retro
• Ekskluzywne czcionki
• Kursywa Czcionki
• Hipsterskie czcionki
• Zabawne czcionki

Dla mnie wybieram czcionkę Aventura z podsumowania Hipster.

Pierwszym krokiem jest znalezienie łącza do pobrania czcionki i zapisanie pliku na komputerze. Prawdopodobnie będzie to plik .zip zawierający różne formaty plików. Najczęściej spotykane to .ttf (czcionka TrueType) lub .otf (czcionka OpenType).

Tworzenie czcionki internetowej (trochę opcjonalne, ale nie do końca)

FontSquirrel ma świetne narzędzie, którego możesz użyć, aby upewnić się, że nikt i żadna przeglądarka nie jest niekompatybilna ze splendorem Twojej witryny. Ponieważ większość pobranych czcionek będzie dostępna tylko w jednym formacie, narzędzie FontSquirrel sprawia, że ​​nie jesteś ograniczony tym, co rozprowadza autor czcionki. Dopóki masz prawa do używania czcionki, możesz upewnić się, że działa ona w Twoim produkcie/witrynie.

Po prostu prześlij ostatnio pobraną czcionkę i wybierz opcje. Osobiście korzystam z opcji Expert , aby uzyskać wszystkie możliwe formaty czcionek. Inne działają, ale nie otrzymujesz tylu typów plików, co jest sednem całej sprawy.

FontSquirrel jest również niesamowity, ponieważ zapewnia wymagany CSS do zaimportowania ich do Twojej witryny. Jak to jest przyjazne dla użytkownika? Po prostu skopiujesz go i wkleisz (z czym mamy do czynienia poniżej).

Przesyłanie czcionki do WordPress

Po wykonaniu tej czynności musisz przesłać czcionkę do dostawcy usług hostingowych. Zawsze robię to przez FTP (używam FileZilla, ale możesz użyć dowolnego klienta).

Jeśli nie znasz informacji FTP swojego hosta, wejdź do cPanel i zajrzyj do plików -> Konta FTP .

Zobaczysz tam każde konto FTP dla hosta, a obok każdego z nich powinieneś również zobaczyć łącze Konfiguruj klienta FTP .

Kiedy tam wejdziesz, cPanel podaje informacje o serwerze lub plik FileZilla (i inne), który możesz zaimportować, aby uzyskać zestaw poświadczeń. Osobiście wolę manual, ale robisz to, co lubisz. Nawet jeśli użyjesz pliku, będziesz potrzebować hasła do zalogowania, więc obie metody są bezpieczne.

Teraz, gdy jesteś zalogowany do swojego hosta przez FTP, przejdź do folderu /wp-content swojej witryny. Ponieważ to jest treść Twojej witryny WordPress, dlaczego miałbyś jej tam nie umieścić? Możesz umieścić go w dowolnym miejscu, nawet w /wp-content/uploads . Ty robisz.

FTP jest bardzo łatwy do przesłania pliku. Po prostu znajdź pobrany plik czcionki i przeciągnij go do prawego dolnego panelu w FileZilla. To rozpocznie przesyłanie. Wyświetlenie go w katalogu nie zajmie Ci więcej niż sekundę.

Jeśli użyłeś narzędzia FontSquirrel, które omówiliśmy powyżej, zrobisz to również dla wszystkich pobranych z nich plików czcionek. Po prostu przeciągnij i upuść je w dowolnym miejscu, w którym chcesz je przechowywać.

Używanie czcionki z CSS

Twoja czcionka jest teraz przesłana i bezpiecznie przytulona do ciepłego, wygodnego koca wp-content. Czas dodać potrzebny import CSS do twojego motywu.

Przejdź do katalogu motywu potomnego (używasz motywu potomnego, prawda?) w swoim kliencie FTP i znajdź plik style.css , kliknij go prawym przyciskiem myszy i wybierz opcję Wyświetl/Edytuj, aby wyświetlić go w domyślnym edytorze tekstu.

Jeśli nie masz motywu potomnego, użyj Kreatora motywów potomnych Orbisius, aby zrobić to bardzo szybko. Możesz później usunąć wtyczkę. Kocham to.

@czcionka

Kod, którego używamy, pochodzi bezpośrednio z FontSquirrel (możesz napisać własny lub skopiować/wkleić poniższy przykład), a wszystko, co zmieniłem, to ścieżka przesyłania adresu URL, aby uwzględnić /wp-content . Wszystko inne jest tym, co zapewnił generator czcionek internetowych.

Wszystko, co robi ten skrypt @font-face , to informowanie arkuszy stylów Twojej witryny: „hej, koleś, umieszczam tutaj tę nową czcionkę, jeśli chcesz jej kiedyś użyć”. Wiesz, trochę jak robisz, kiedy przynosisz babeczki do domu i mówisz ludziom, z którymi mieszkasz.

Bez @font-face , jeśli spróbujesz nazwać font-family: 'aventurabold'; przez CSS, Twoja witryna nie będzie w stanie go znaleźć, ponieważ nigdy nie powiedziano jej, gdzie ją przechowujesz.

@font-face {
    font-family: 'aventurabold';
    src: url('/wp-content/aventura-bold-webfont.eot');
    src: url('/wp-content/aventura-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/aventura-bold-webfont.woff2') format('woff2'),
         url('/wp-content/aventura-bold-webfont.woff') format('woff'),
         url('/wp-content/aventura-bold-webfont.ttf') format('truetype'),
         url('/wp-content/aventura-bold-webfont.svg#aventurabold') format('svg');
    font-weight: normal;
    font-style: normal;

}

Zapisz plik, a ponieważ otworzyłeś go do edycji za pośrednictwem FileZilla, pojawi się okno dialogowe z pytaniem, czy chcesz zastąpić ten na serwerze. Twoja odpowiedź brzmi oczywiście tak.

Teraz wszystko, co musisz zrobić, to przejść do pliku custom.css (lub jeśli używasz Divi, Divi -> Opcje motywu -> Niestandardowy CSS w panelu nawigacyjnym pulpitu nawigacyjnego WP).

Po prostu dodajesz styl CSS, tak jak w przypadku każdej innej czcionki. Po prostu zastąpiłem czcionki Google „Roboto” i „Exo”, których używałem, na „aventurabold” i wszystko było dobrze (dzięki importowi @font-face powyżej).

body {
    font-family: "aventurabold", arial, sans-serif;
    font-size: 18px;
    line-height: 28px;
    color: #ffffff;
    text-transform: uppercase;
}

h1, h2, h3, h4, h5, h6 {
    color:  #fff;
    font-family: 'aventurabold', sans-serif;
    font-weight: 700;
   text-transform: uppercase;
}

Owoce naszej pracy

Oto jak to wyglądało wcześniej:

A oto co się stało po dodaniu Aventury do CSS:

Hurra! To działa! Dobra robota! Jedź do nas!

Dobrze wyglądasz, Friendo

Jak kiedyś powiedział kapitan Malcolm Reynolds: „Zrobiliśmy niemożliwe, a to czyni nas potężnymi”. Cóż, w porządku, więc przesłanie czcionki i zaimportowanie jej przez CSS może nie do końca oznaczać dokonanie niemożliwego , ale z pewnością zrobiłeś coś, o czym wielu użytkowników WordPressa nie odważyłoby się zrobić: dodanie podstawowych funkcji bez wtyczki.

A to, moi przyjaciele, naprawdę czyni was potężnymi.

Więc jaka jest twoja ulubiona czcionka do używania w sieci, która nie jest czcionką Google? Powiedz mi w komentarzach!

Obraz miniatury artykułu w rozdzielczości 32 pikseli / shutterstock.com