Încărcarea fonturilor personalizate folosind pluginul Hash Custom Font Uploader

Te-ai săturat să folosești aceleași fonturi vechi pe site-ul tău web și vrei să arate diferit? Dacă nu ești un expert în codare, nu-ți face griji! Avem un ghid simplu care vă va arăta o modalitate ușoară de a adăuga fonturile preferate la temele dvs. WordPress. Această documentație vă va ghida prin procesul de încărcare a fonturilor personalizate, pas câte unul, ceea ce face simplu să oferiți site-ului dvs. un stil unic.

INSTALARE PLUGIN

Pentru a începe personalizarea și încărcarea fontului, va trebui să instalați un plug-in numit Hash Custom Font Uploader .

*Notă: acest plugin este compatibil numai cu temele HashThemes*

Instalare de încărcare a fonturilor personalizate Hash

Pentru a instala instrumentul de încărcare a fonturilor Hash, urmați instrucțiunile:

• Accesați Pluginuri > Adăugați pluginuri noi > Încărcați pluginuri .
• Faceți clic pe Încărcare plugin și alegeți fișierul .zip de pe computer.
• După ce ați încărcat fișierul .zip, faceți clic pe Instalați acum .
• Apoi activați pluginul.
• Puteți vedea că pluginul apare ca Hash Custom Font Uploader.

După ce ați instalat pluginul, puteți utiliza fonturile personalizate pentru a porni procesul de încărcare a fonturilor.

Lăsați-ne să vă ghidăm prin proces, pas câte unul.

SELECTAREA FONTULUI

Temele dezvoltate de HashThemes oferă o selecție largă de fonturi Google din care puteți alege. Există peste 800 de fonturi Google.

Cu toate acestea, dacă căutați ceva distinctiv, puteți explora întotdeauna numeroase site-uri web de fonturi care oferă o varietate și mai mare de opțiuni create de mai mulți designeri de fonturi și sunt disponibile gratuit sau plătite pe diferite site-uri web.

Font Squirrel este un exemplu excelent al unui astfel de site web. Această platformă nu numai că vă oferă libertatea de a descărca fonturi fără costuri, ci simplifică și procesul de conversie a fișierelor în formatele necesare pentru încărcarea fonturilor.

În plus, merită menționat faptul că există numeroase fonturi de înaltă calitate disponibile pentru cumpărare, care necesită doar o taxă minimă și sunt gata pentru utilizare imediată.

În acest tutorial, vom demonstra cum să simplificați procesul de încărcare a fonturilor folosind Font Squirrel.

Avem nevoie de 2 formate de fișiere de font (WOFF și WOFF2) pentru a fi utilizate în Hash Custom Font Uploader. Dacă doriți să aflați mai multe despre variațiile fontului și de ce fișierele sunt convertite în format WOFF și WOFF2, citiți în continuare. Dacă doriți să începeți imediat cu încărcarea unui tutorial de font personalizat, faceți clic aici.

ÎNȚELEGEREA DIFERITELOR FORMATE DE FIȘIER

Înainte de a trece la tutorial, să ne familiarizăm cu unele formate tipice de fișiere în care pot veni fonturile.

Font TrueType (.ttf): Un format de font .ttf este un format de font utilizat pe scară largă pentru tipografia desktop și web. Acest tip de fișier este compatibil atât cu sistemele Windows, cât și cu macOS.

Font OpenType (.otf): Un format Open Type este o extensie a formatului True Type. Acest format permite caracteristici tipografice suplimentare și este compatibil atât cu Windows, cât și cu macOS.

Web Open Font Format (.woff): Acest tip de format este conceput special pentru utilizarea web. Oferă o compresie bună și compatibilitate cu browserul.

Web Open Font Format 2 (.woff2): Acest format de fișier este o versiune îmbunătățită a formatului Web Open Font, oferind compresie și performanță superioare pentru fonturile web.

Font PostScript de tip 1 (.pfb): formatul de font de tip PostScript este o versiune mai veche a formatului de font, care este utilizat în principal în industria tipăririi PostScript.

Font SVG (.svg): Bazat pe XML, fonturile SVG sunt adesea folosite pentru pictograme web și design-uri speciale.

Font bitmap (.fon): Fonturi reprezentate ca o grilă de pixeli, potrivite pentru afișaje cu rezoluție scăzută.

Acestea sunt câteva dintre formatele de fonturi care sunt utilizate în diverse scopuri. Motivul pentru familiarizarea cu aceste formate este că unele fișiere trebuie convertite pentru un avantaj suplimentar.

Cele mai utilizate formate de fișiere sunt TTF (True Type Font) și OTF (Open Type Font) pentru tipografia desktop și web.

Cu toate acestea, începând cu 2021, cele mai frecvent utilizate formate de font pentru utilizarea web au fost Web Open Font Format (WOFF) și WOFF2 (Web Open Font Format 2).

*Notă: este important să știți că popularitatea fonturilor poate evolua în timp, iar noile tehnologii le pot înlocui pe cele vechi.*

De ce este necesar să schimbați fișierele în formatele .woff și .woff2?

În timp ce fișierele TTF și OTF pot fi încărcate direct pe web, conversia lor în format de fișier .woff și .woff2 are câteva avantaje:

1. Compresie:

Motivul principal pentru a converti fișierele TTF și OTF în formatele WOFF și WOFF2 este că acestea se comprimă în dimensiune. Când dimensiunea fișierului este mai mică, aceasta duce la timpi mai rapidi de încărcare a paginii web. Acest lucru este crucial pentru îmbunătățirea experienței utilizatorului și a clasamentului SEO.

2. Optimizare web:

Formatele WOFF și WOFF2 sunt potrivite pentru web și sunt acceptate pe scară largă, inclusiv funcția de subsetare a fonturilor care permite utilizatorilor să includă doar caracterele și simbolurile necesare pentru o anumită pagină web, reducând și mai mult dimensiunea fișierului.

3. Compatibilitate browser:

Browserele web moderne acceptă pe scară largă formatele WOFF și WOFF2, asigurând redarea fiabilă a fonturilor pe diferite platforme și dispozitive. Fișierele TTF și OTF pot avea diferite niveluri de compatibilitate și suport.

4. Licențiere:

Multe licențe de fonturi tind să permită utilizarea formatelor WOFF și WOFF2 pe web, în ​​timp ce acestea pot avea mai multe restricții asupra fișierelor TTF și OTF. Prin conversia fonturilor în format WOFF/WOFF2, vă puteți asigura că respectați cerințele de licențiere a fonturilor.

5. Performanță:

Formatele de font WOFF și WOFF2 sunt în general optimizate. Prin urmare, au performanțe mai bune în mediile web, rezultând o redare mai fluidă și mai rapidă a textului.

Acestea sunt necesitățile de bază pentru a converti fișierele TTF și OTF în fișiere WOFF/WOFF2. În continuare, vă vom ghida prin procesul de încărcare a fonturilor.

SELECTAREA FONTURILOR ÎN SITE-UL WEB „FONT SQUIRRE L”.

Acum, să începem cu procesul de selecție a fontului și să explorăm în continuare.

• Introduceți „Sinkin Sans” în bara de căutare și veți vedea o previzualizare a fontului împreună cu diferitele sale variante.
• Apoi, descărcați fișierul OTF pentru fontul Sinkin Sans.

În ceea ce privește acest tutorial, am ales fontul „Sinkin Sans” . Puteți alege și utiliza orice font pe placul dvs. De asemenea, așa cum am menționat mai devreme, fontul poate fi în diferite formate. Aici fișierul fontului Sinkin Sans este în format OTF.

• Extrageți fișierul .zip în folderul desemnat.

GENERATOR DE FONT WEB

Fonturile care vor fi utilizate în aplicația de încărcare a fonturilor personalizate Hash ar trebui să fie în formatele de fișiere WOFF și WOFF2. Deci, dacă fontul descărcat este în formatele de fișier WOFF și WOFF2, atunci puteți sări peste pasul de mai jos și să treceți direct la Hash Custom Font Uploader. Dar dacă fontul descărcat nu este în formatele WOFF și WOFF2, atunci va trebui să utilizați Font Generator/Converter pentru a genera fișiere de font WOFF și WOFF2.

• Vom folosi aplicația online Webfont Generator a site-ului Font Squirrel.
• Faceți clic pe Webfont Generator, așa cum este indicat de numărul 3 din captura de ecran de mai jos.

• Pentru a obține setul, faceți clic pe butonul Încărcați fonturi și încărcați fișierele cu font descărcate/extrase

• În acest caz, alegem „Sinkin Sans Regular”.
• După ce ați făcut selecția, faceți clic pe Deschidere.
• Descărcați kitul .

• Extrageți fișierul zip descărcat. Veți vedea că generatorul Webfont a creat fișierele .WOFF și .WOFF2 necesare pentru pluginul nostru Hash Custom Font Uploader .

Încărcarea fonturilor personalizate pe pluginul Hash Custom Font Uploader

Fontul Sinkin Sans este aproape gata pentru a fi folosit pe site-ul dvs. web și sunteți la doar câțiva pași distanță. Vă rugăm să urmați instrucțiunile de mai jos:

• Accesați Instrumentul de încărcare de fonturi personalizate Hash
• Apoi, încărcați fișierele de font .woff2 și .woff conform instrucțiunilor și asigurați-vă că selectați greutatea fontului ca Normal 400 .
• În pasul următor, dă un nume fontului tău pentru a fi mai ușor de găsit atunci când ai nevoie de el. În acest caz, deoarece fontul este Sinkin Sans, l-am numit în consecință.
• Salvați-l făcând clic pe „Salvare setări” .
• Odată salvat, veți vedea cum apare fontul Sinkin Sans în partea de jos. Acest lucru a indicat, de asemenea, că fontul funcționează și îl puteți folosi acum.

Încărcarea variantelor pentru fonturi personalizate

Un font poate avea diferite stiluri și aspect. Aici vom învăța cum să adăugați diferite stiluri de font ale aceluiași font.

Fontul pe care l-am selectat mai sus (Sinkin Sans) are diferite variații, cum ar fi subțire, ușor, obișnuit, mediu, semi-bold, bold, negru și italic.

Aici vom selecta stilul Semi Bold al lui Sinkin Sans. Și vom folosi un alt site web de conversie de fonturi în loc de „Font Squirrel”

Notă: Există multe alte convertoare pe internet. Aici, folosim CloudConvert.

• Pentru început, accesați convertorul OTF care convertește fișierele noastre în fișiere .woff2 și .woff.
• Aici puteți vedea că vă ajută să convertiți fișiere cu ușurință. Alegeți fișierele în care urmează să le convertiți. Aici vom converti fișierul Sinkin Sans semi bold .otf în .woff și .woff2
• După ce ați ales ce fișier să convertiți, „ Alegeți fișierul” de pe desktop.
• Convertiți fișierele și acest lucru va dura ceva timp.
• După finalizarea conversiei, salvați fișierele necesare pe computer.

• Accesați Instrumentul de încărcare de fonturi personalizate Hash
• Și pe măsură ce adăugați greutatea aceluiași font, faceți clic pe „ Adăugați greutate font” în loc să faceți clic pe „Adăugați font nou”.

• Apoi, încărcați fișierele de font .woff2 și .woff conform instrucțiunilor și asigurați-vă că selectați greutatea fontului ca SemiBold 600 .
• Faceți clic pe butonul „Salvare setări” pentru a-l salva.
• Puteți vedea cum apare textul. Textul este mai îndrăzneț decât textul de mai sus.
• În mod similar, puteți adăuga mai multe variante de font făcând clic pe „ Adăugați greutatea fontului ” și un alt font făcând clic pe „ Adăugați font nou ”.

UTILIZAREA FONTURILOR SITE-UL DVS

Să folosim fontul încărcat pe site.

• Accesați Aspect> Personalizare .
• În setările tipografiei , găsiți opțiunea „Corps” pentru personalizare ulterioară.”
• În opțiunea „Familie de fonturi”, căutați „Sinkin Sans” și selectați-o.
• Odată ce fontul este selectat, „ Greutatea/Stilul fontului ” va afișa variația pe care am adăugat-o mai devreme (Normal 400 și Semi Bold).
• Selectați varianta corespunzătoare și apoi vedeți modificările live în fereastra de personalizare din dreapta.
• Puteți modifica dimensiunea fontului, spațierea dintre litere și înălțimea liniilor după bunul plac.
• Când sunteți mulțumit, faceți clic pe „Publicați” pentru a aplica modificările, iar site-ul dvs. va avea noul aspect.

Este tot ce trebuie să faceți pentru a încărca fonturile personalizate. Dacă aveți vreo confuzie, puteți oricând să ne contactați.