Cum să adăugați fonturi personalizate la o temă WordPress

Fonturile joacă un rol major în designul, lizibilitatea și, uneori, chiar funcționalitatea site-ului dvs. web. Alegeți-l pe cel greșit și ați putea distruge ceea ce altfel ar fi un site web grozav. În mod egal, atât stilul cât și dimensiunea fontului pot dicta cât de ușor (sau altfel!) este site-ul dvs. de utilizat. Dar ce faci dacă fontul tău ideal nu este disponibil în tema WordPress? În acest articol, vom verifica mai multe moduri în care puteți utiliza fontul personalizat la alegere.

Haide să mergem!

De ce să folosiți fonturi personalizate

Multe teme vin acum cu o selecție de fonturi din care puteți alege, care sunt „coapte”. Acestea sunt în multe cazuri potrivite pentru site-ul web pe care îl proiectați. Dar, dacă nu reușiți să selectați fontul potrivit cu fonturile care sunt deja oferite, atunci este timpul să vă uitați la fonturi alternative și acest lucru va însemna că trebuie să puteți adăuga fonturile personalizate pe site-ul dvs. web.

Folosirea fonturilor personalizate vă permite să profitați de combinația frumoasă de diferite fonturi de pe site-ul dvs. pentru a îmbunătăți tipografia și experiența utilizatorului. Cercetările au arătat că există beneficii semnificative ale utilizării tipografiei corecte. Aceasta nu include doar o îmbunătățire a experienței generale a utilizatorului, ci chiar și cât de bine sunt procesate de către creier informațiile de pe un site web. Cu cât acest lucru este mai ușor, cu atât este mai ușor să comunicați clienților dvs. oferta/serviciile dvs. de afaceri.

În timp ce folosirea fonturilor personalizate poate îmbunătăți cu siguranță utilizarea site-ului dvs., este important să nu înnebuniți fonturile! O selecție de două fonturi care au fost împerecheate cu grijă ar trebui să fie suficientă. Mai mult și puteți risca să vă încetiniți site-ul.

Să începem și să ne uităm la opțiunile disponibile pentru a adăuga fonturi personalizate pe site-ul nostru WordPress.

Adăugați Google Fonts cu Google Fonts Plugin

Cea mai simplă și populară modalitate de a adăuga fonturi personalizate pe site-ul dvs. WordPress trebuie să fie utilizarea Plugin-ului Easy Google Fonts.

După ce instalați și activați acest plugin, deschideți personalizarea temei în meniul Aspect > Personalizare. Veți observa în bara laterală din stânga un nou meniu drop-down de acordeon numit Tipografie a fost adăugat.

Faceți clic pentru a deschide acest lucru și apoi puteți utiliza butonul „Editați font” pentru a schimba rapid fonturile site-ului dvs., precum și greutatea acestora, dacă sunt majuscule etc. și altele. De asemenea, puteți utiliza proprietăți CSS pentru a modifica și mai mult stilul și poziționarea fonturilor alese.

În plus, puteți chiar să adăugați propriile controale de font. Pentru a face acest lucru, mergeți la pagina de setări a pluginului sub Setări > Fonturi Google.

Creați un nou control de font și definiți selectoarele CSS. De exemplu, setăm clasele .entry-title care corespund titlurilor de postare ale temei noastre. Apoi, când vizitați din nou personalizarea, va fi disponibilă o nouă casetă cu numele specificat pentru ca dvs. să aplicați personalizarea fontului titlurilor postărilor în același mod în care am descris mai sus. Uşor!

Adăugați manual fonturi Google

Dacă preferați să nu utilizați un plugin, dar doriți totuși să profitați de utilizarea Fonturilor Google pe site-ul dvs. WordPress, atunci nu există nicio problemă. Acestea pot fi adăugate manual relativ ușor. Să aruncăm o privire cum. Desigur, există și o modalitate manuală de a adăuga fonturi Google pe site-ul dvs. web.

Primul pas:

În primul rând, trebuie să obțineți linkul pentru fonturi de pe site-ul de fonturi Google.

Să presupunem că doriți să utilizați familia de fonturi Roboto. Când faceți clic pe acest font, veți fi transferat pe pagina sa unde puteți previzualiza orice text pentru a vă asigura că fontul vi se potrivește. În partea dreaptă veți vedea o casetă „Utilizați pe web”, care include linkul de care va trebui să adăugați acest lucru pe site-ul dvs.

Pentru a introduce corect Google Fonts în WordPress, deschideți fișierul functions.php al temei cu editorul preferat și introduceți următorul cod la sfârșit:

 function my_google_fonts() { wp_enqueue_style( 'my-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap', false ); } add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );

Copiați adresa URL furnizată în textul Google Link (începe cu https://) și apoi înlocuiți-o în codul de mai sus (în exemplul nostru, acesta este în prezent https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap )

Apoi, în fișierul style.css al temei, utilizați fontul în același mod în care ați proceda cu orice alt font, urmând „Regulile CSS pentru a specifica familiile” oferite de Google.

 h1, h2, h3 { font-family: 'Roboto', sans-serif; }

Acum, în partea din față a site-ului dvs., ar trebui să vedeți fontul Roboto aplicat zonelor în care a fost specificat în fișierul dvs. CSS.

Adăugați fonturi Adobe

O alternativă excelentă la fonturile Google sunt fonturile de la Adobe Fonts. Pluginul Custom Adobe Fonts vă ajută să încorporați cu ușurință aceste fonturi în site-ul dvs. WordPress și în prezent funcționează cu tema Astra, Tema Beaver Builder, Pluginul Beaver Builder și Elementor Page Builder.

Pentru a începe, instalați pluginul și apoi mergeți la biblioteca extinsă de fonturi Adobe pentru a găsi un font care vi se potrivește (va trebui să vă înregistrați pentru a vă conecta).

Există o mulțime de moduri de a filtra fonturile, iar sistemul este destul de intuitiv de utilizat. Odată ce ați găsit un font care vă place, faceți clic pe el și căutați în partea din dreapta sus a paginii, unde veți vedea că scrie „Adăugați la proiectul web”. Se va deschide o cutie ca cea de mai jos. Dați un nume proiectului dvs. web și selectați variantele de font pe care doriți să le includeți în acesta.

Odată ce îi dați un nume și apăsați butonul „Creare”, veți fi dus la următorul ecran, unde sunt furnizate un cod HTML de încorporare și regulile CSS. Acum aveți două opțiuni. Puteți fie a) să continuați să utilizați pluginul Custom Adobe Fonts, fie b) să încorporați manual aceste fonturi.

Folosind pluginul personalizat Adobe Fonts

Acesta este cel mai simplu mod de a trage fonturile Adobe în site-ul dvs. web. După ce ați creat proiectul, faceți clic pe „Proiecte web” și găsiți proiectul în listă. Veți vedea în partea de sus că există un cod „ID de proiect” (după cum se arată mai jos). Acum, mergeți la setările de plugin ale fontului Adobe și faceți clic pe „Fonturi personalizate Typekit” din meniu. Introduceți acest ID de proiect în această casetă și salvați.

Veți vedea acum acest font listat fie în WordPress Customizer, Elementor sau în alt generator de pagini compatibil pe care îl utilizați. Selectează și ești gata.

Încorporarea manuală a fonturilor personalizate

Încorporarea manuală a fonturilor dvs. Adobe se face exact în același mod cum am descris pentru încorporarea fonturilor Google. Veți vedea un link de încorporare a foii de stil oferit de Adobe (prezentat mai jos) în prezentarea generală a proiectului Web. Pentru a vedea clasele CSS, faceți clic pe textul „Editați proiectul” și acestea sunt furnizate alături de fiecare stil de font.

Cum să găsiți fonturi personalizate și să le asociați

De asemenea, puteți găsi și descărca fontul ideal pentru site-ul dvs. și îl puteți încărca din folderele site-ului dvs., deoarece există o mulțime de resurse care oferă fonturi gratuite sau premium într-o mare varietate.

De asemenea, puteți obține ajutor de la instrumentul online Font Pair, care este excelent pentru previzualizarea combinațiilor de fonturi, astfel încât să puteți combina și potrivi fonturile după cum credeți de cuviință. Prin modul în care prezintă perechile de fonturi, este, de asemenea, ușor să descoperiți alte sugestii de asociere prin navigare.

Pe blogul nostru, puteți găsi și două articole grozave despre împerecherea fonturilor. Există Ghidul pentru împerecherea fonturilor pentru web designeri + 30 de exemple uimitoare! în cazul în care doriți să aflați mai multe despre împerecherea fonturilor din punct de vedere al designului, cu consultanță excelentă pe ceea ce ar trebui să subliniați și cum să obțineți cea mai bună lizibilitate și senzație. Mai multe detalii despre instrumentele de împerechere a fonturilor pot fi găsite în articolul nostru 10 Top Font Pairing Tools for Web Designers.

Încărcați fonturi personalizate din foldere

Deși Google Fonts și Adobe Fonts oferă o selecție minunată dintre dvs. din care puteți alege și o modalitate simplă de a le utiliza pe site-ul dvs. web, nu este singura opțiune care vă este disponibilă în căutarea fontului perfect.

Există câteva site-uri web excelente care vând fonturi personalizate care au fost create cu atenție de designeri. Font Squirrel, de exemplu, oferă o bibliotecă mare de fonturi și, cel mai important, permite utilizarea comercială și un format ușor de implementat pentru aceste fonturi. Există un amestec de fonturi gratuite și „premium” pe site (care trebuie plătite).

Un font grozav pe care poate doriți să îl luați în considerare de la Font Squirrel este Fira Sans. Să folosim asta ca exemplu pentru a afla cum să-l instalăm pe site-ul nostru WordPress pentru utilizare.

Mai întâi, faceți clic pe fila „Webfont Kit”. Bifați caseta „WOFF” și apoi faceți clic pe „Descărcați kit @Font-Face”.

Veți primi un fișier zip care acum trebuie extras. În acest folder veți găsi fișierul font împreună cu un fișier stylesheet.css care conține codul de care veți avea nevoie pentru propria foaie de stil CSS.

Pentru OpenSans-ExtraBold-webfont, de exemplu, trebuie să folosim următorul CSS:

 @font-face { font-family: 'open_sansextrabold'; src: url('OpenSans-ExtraBold-webfont.eot'); src: url('OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-ExtraBold-webfont.woff2') format('woff2'), url('OpenSans-ExtraBold-webfont.woff') format('woff'), url('OpenSans-ExtraBold-webfont.ttf') format('truetype'), url('OpenSans-ExtraBold-webfont.svg#open_sansextrabold') format('svg'); font-weight: normal; font-style: normal; }

Cel mai bun pariu este să plasați toate fișierele cu fonturi de toate formatele într-un director adecvat la alegere, sub folderul cu tema. În exemplul nostru, se află în folderul /wp-content/themes/twentytwenty/assets/fonts/open-sans/ .

În același folder, creați un fișier open-sans.css și plasați în interiorul întregului cod CSS al fiecărui fișier stylesheet.css, astfel încât conținutul acestuia să arate astfel:

 @font-face { font-family: 'open_sansbold'; src: url('OpenSans-Bold-webfont.eot'); src: url('OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-Bold-webfont.woff') format('woff'), url('OpenSans-Bold-webfont.ttf') format('truetype'), url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'open_sansbold_italic'; src: url('OpenSans-BoldItalic-webfont.eot'); src: url('OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-BoldItalic-webfont.woff') format('woff'), url('OpenSans-BoldItalic-webfont.ttf') format('truetype'), url('OpenSans-BoldItalic-webfont.svg#open_sansbold_italic') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'open_sansextrabold'; src: url('OpenSans-ExtraBold-webfont.eot'); src: url('OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-ExtraBold-webfont.woff') format('woff'), url('OpenSans-ExtraBold-webfont.ttf') format('truetype'), url('OpenSans-ExtraBold-webfont.svg#open_sansextrabold') format('svg'); font-weight: normal; font-style: normal; }

Acest lucru ajută, de asemenea, diferitele browsere să selecteze fontul pe care îl acceptă. Dacă trebuie să puneți în coadă fișierul CSS al fonturilor în modul WordPress, ar trebui să o faceți în functions.php astfel:

 function my_custom_fonts() { wp_enqueue_style( 'my-custom-fonts', get_template_directory_uri() . '/assets/fonts/open-sans/open-sans.css', false ); } add_action( 'wp_enqueue_scripts', 'my_custom_fonts' );

Nu uitați să înlocuiți adresa URL cu calea către fișierul dvs. open-sans.css.

Concluzie

Alegerea fontului potrivit la construirea site-ului dvs. are un impact semnificativ asupra modului în care arată și funcționează site-ul dvs. Cu atât de multe fonturi uimitoare din care să alegeți, nu simțiți că trebuie să rămâneți doar la fonturile oferite de tema dvs. Sperăm că acest articol vă arată cum puteți utiliza aproape orice font potrivit pentru site-ul dvs. WordPress!