Cum se utilizează fonturile descărcate în WordPress fără plugin

Google Fonts este o resursă uimitoare. Înainte de a fi atât de răspândit, crearea de site-uri web care foloseau fonturi unice era o adevărată durere. Acum, însă, cu câteva clicuri și un fragment de cod, site-ul dvs. web trece de la a fi Helvetic-eh la Helvetic-awesome . Dar dacă fontul pe care îl iubești nu face parte din familia Google Fonts? Trebuie să știi cum să folosești fonturile descărcate, deoarece ai descoperit un font fantastic de hipster care vorbește cu sufletul bărbii tale.

Utilizarea unui font descărcat pe site-ul dvs. web nu este la fel de simplă ca clicky-clicky-paste-paste. Nu este un proces greu, atenție la tine, și te voi plimba prin el, astfel încât să nu mai ai niciodată, vreodată, vreodată un site Helvetic-eh .

Acum, vreau să subliniez că puteți face acest lucru printr-un plugin. Există o mână disponibilă în repo. Dar de ce am vrea să facem asta? Sunt genul de tip care preferă să evite utilizarea unui plugin atunci când câteva linii de cod vor face același lucru. Pluginurile în exces cauzează o mulțime de umflături, solicitări HTTP inutile și încetinesc site-ul.

Deci, vom importa aceste fonturi manual - ca și cum ar fi din nou sfârșitul anilor '90. Da, da.

Alegerea și descărcarea unui font

Sunt un mare fan al cercurilor de fonturi. Teme elegante are o tonă pe care o puteți scana pentru a vedea ce vă place. Așa că lovește câteva dintre acestea și vezi ce îți place.

• Fonturi de mână
• Fonturi retro
• Fonturi de lux
• Fonturi cursive
• Fonturi Hipster
• Fonturi distractive

Pentru mine, merg cu fontul Aventura din rundă Hipster.

Primul dvs. pas este să găsiți linkul de descărcare pentru font și să salvați fișierul pe computer. Probabil că va fi un fișier .zip care conține diferite formate de fișiere. Cele mai frecvente pe care le veți găsi este .ttf (TrueType Font) sau .otf (OpenType Font).

Crearea unui Webfont (Kinda opțional, dar nu chiar)

FontSquirrel are un instrument excelent pe care îl puteți folosi pentru a vă asigura că nimeni și niciun browser nu sunt incompatibile cu splendoarea site-ului dvs. Întrucât majoritatea fonturilor pe care le descărcați vor fi disponibile numai într-un singur format, instrumentul FontSquirrel îl face astfel încât să nu fiți limitat de ceea ce a distribuit autorul fontului. Atâta timp cât aveți drepturi de utilizare a fontului, vă puteți asigura că funcționează cu produsul / site-ul dvs.

Încărcați fontul descărcat recent și alegeți opțiunile. Personal, folosesc opțiunile Expert , doar pentru a obține toate formatele de font pe care le pot. Celelalte funcționează, dar nu aveți la fel de multe tipuri de fișiere, ceea ce este un punct important al întregului lucru.

FontSquirrel este, de asemenea, minunat că vă oferă CSS necesar pentru a le importa pe site-ul dvs. Cum este asta pentru o utilizare ușoară? Pur și simplu îl veți copia și lipi în (despre care ne ocupăm mai jos).

Încărcarea fontului pe WordPress

După ce ați făcut acest lucru, va trebui să încărcați fontul către furnizorul dvs. de găzduire. Fac întotdeauna acest lucru prin FTP (folosesc FileZilla, dar puteți folosi orice client doriți).

Dacă nu cunoașteți informațiile FTP ale gazdei, accesați cPanel și căutați sub Fișiere -> Conturi FTP .

Veți vedea fiecare cont FTP pentru gazdă acolo și ar trebui să vedeți și un link Configurare client FTP lângă fiecare.

Când intrați acolo, cPanel vă oferă informații despre server sau un fișier FileZilla (și altele) pe care îl puteți importa pentru a vă stabili acreditările. Mă apuc de manual, personal, dar tu faci ce îți place. Chiar dacă utilizați fișierul, veți avea nevoie de parolă pentru a vă autentifica, astfel încât ambele metode sunt sigure și sigure.

Acum că v-ați conectat la gazdă prin FTP, navigați la folderul / wp-content pentru site-ul dvs. Deoarece acesta este conținut pentru site-ul dvs. WordPress, de ce nu l-ați pune acolo? Simțiți-vă liber să îl puneți oriunde, chiar și în / wp-content / uploads . Tu te faci.

FTP este foarte ușor de încărcat fișierul. Doar găsiți fișierul de font pe care l-ați descărcat și trageți-l în panoul din dreapta jos în FileZilla. Aceasta va începe încărcarea. Nu va dura mai mult de o secundă pentru a o vedea în director.

Dacă ați folosit instrumentul FontSquirrel pe care l-am discutat mai sus, veți face acest lucru și pentru toate fișierele de fonturi pe care le-ați descărcat din ele. Trageți și plasați-le oriunde doriți să le stocați.

Utilizarea fontului dvs. cu CSS

Fontul dvs. este acum încărcat și cufundat în siguranță în pătura sa caldă și confortabilă cu conținut wp. Este timpul să adăugați importul CSS necesar la tema dvs.

Accesați directorul temei copilului dvs. (utilizați o temă copil, nu?) În clientul FTP și găsiți fișierul style.css , faceți clic dreapta pe acesta și selectați Vizualizare / Editare pentru a-l afișa în editorul de text implicit.

Dacă nu aveți o temă pentru copii, utilizați Creatorul de teme pentru copii Orbisius pentru ao face mega-ultra rapid. Puteți șterge pluginul ulterior. Îmi place chestia asta.

@ font-face

Codul pe care îl folosim provine direct de la FontSquirrel (puteți să vă scrieți propriul sau să copiați / lipiți exemplul de mai jos) și tot ceea ce am schimbat a fost calea de încărcare URL pentru a include / wp-content . Orice altceva este ceea ce a oferit generatorul de fonturi web.

Tot ce face acest script @ font- face este să spuneți foilor de stil ale site-ului dvs. web, „hei, tipule, pun acest font nou aici, dacă vrei să îl folosești cândva”. Știi, cam ca atunci când aduci cupcakes acasă și le spui oamenilor cu care locuiești.

Fără @ font-face , dacă încercați să apelați font-family: „aventurabold”; de către CSS, site-ul dvs. nu îl va putea găsi, deoarece nu i s-a spus niciodată unde îl păstrați.

@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;

}

Salvați fișierul și, din moment ce l-ați deschis pentru editare prin FileZilla, veți primi un dialog care vă va întreba dacă doriți să îl înlocuiți pe cel de pe server. Răspunsul dvs. este, evident, da.

Acum tot ce trebuie să faceți este să accesați custom.css (sau dacă utilizați Divi, Divi -> Opțiuni temă -> CSS personalizat în panoul de navigare al tabloului de bord WP.)

Trebuie doar să adăugați stilul CSS, așa cum ați face pentru orice alt font. Pur și simplu am înlocuit Fonturile Google „Roboto” și „Exo” pe care le foloseam cu „aventurabold” și lucrurile erau bune de făcut (datorită importului @ font-face de mai sus).

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;
}

Fructele muncii noastre

Iată cum arăta înainte:

Iată ce s-a întâmplat după ce am adăugat Aventura la CSS:

Ura! Functioneaza! Loc de muncă bun! Du-ne!

Arată bine, Friendo

Așa cum a spus odată căpitanul Malcolm Reynolds, „Am făcut imposibilul și asta ne face puternici”. Ei bine, bine, deci încărcarea unui font și importarea acestuia prin CSS s-ar putea să nu însemne prea mult să fi făcut imposibilul , dar cu siguranță ați făcut ceva ce mulți utilizatori WordPress nu ar îndrăzni să facă: adăugarea funcționalității de bază fără un plugin.

Și asta, prieteni, într-adevăr te face puternic.

Deci, care este fontul tău preferat de utilizat pe web care nu este un font Google? Spune-mi în comentariile tale!

Imagine în miniatură a articolului de 32 pixeli / shutterstock.com