Si të ngarkoni fontet e Google në vend në WordPress: Një artikull optimizimi që gjendet në GTmetrix, Pingdom dhe Google PageSpeed ​​Insights

Nëse faqja juaj e WordPress ka Font Google gabimet në GTmetrix/Pingdom, ngarkimi i shkronjave të Google në vend duhet t’i rregullojë ato.


Ju nuk mund të kontrolloni disa burime të jashtme dhe skriptet, gjë që i bën ata të pamundur për të kompresuar, minimizuar ose optimizuar. Kjo mund të ndikojë seriozisht në shpejtësinë tuaj të WordPress. Një nga burimet më të zakonshme të jashtme janë Fonts Google. Nëse tashmë jeni konfiguruar një shtojcë cache si WP Rocket ose WP Fast Cache, mund të filloni të vini re burime të jashtme si shkronja që ndikojnë në notat + herë. Kjo është ajo kur ngarkimi i Fonts Google në vend hyn në lojë. Kjo lejon që shtojca juaj e cache të kompresojë të gjitha burimet që lidhen me fontin (et) tuaj personal..

Merrni një kopje rezervë të plotë të faqes tuaj (ose të paktën skedarët që jeni duke redaktuar) përpara se të bëni ndryshime.

Google Fonts-GTmetrix

Hapi 1: Zgjidhni një font të Google

Në këtë shembull, ne do të përdorim Font font me dy pesha font: të rregullta (400) dhe të theksuara (700).

Google Fonts-Selection

Përdorni më pak shkronja Google – mbajini minimumin e Shkronjave tuaja të Google (më pak shkronja = më pak kërkesa).

Jetë selektiv me peshat e shkronjave – numri i peshave ndikon gjithashtu në kohën e ngarkesës. Nëse ju duhet vetëm versioni i guximshëm, zgjidhni peshat e tjera në mënyrë që Fonts Google të ngarkojnë vetëm ato që ju nevojiten.

Hapi 2: Shkarkoni fontin

Shkarkoni shkronjat kur të jeni gati. Google do të shkarkojë automatikisht të gjitha peshat e shkronjave, kështu që zgjedhja e peshave të shkronjave nuk kërkohet në këtë hap, dhe në vend të kësaj kërkohet në hapin 3.

Google Fonts-Download

Hapi 3: Konvertoni shkronjat në fontet në internet

Tjetra, ne do t’i kthejmë këto skedarë fontesh (.ttf) në skedarë të fontit në internet. Unë do të përdor Transfonter. Shkoni në faqen e tyre, klikoni Shtoni shkronja, atëherë ngarkoni vetëm llojet e shkronjave që do të përdorni në faqen tuaj të internetit. Unë jam duke përdorur Roboto-Regular.ttf dhe Roboto-Bold.ttf kështu që kam edhe pesha të rregullta dhe të guximshme. Lërini cilësimet si të paracaktuar pasi WOFF dhe WOFF2 mbulojnë të gjithë shfletuesit kryesorë. Tani klikoni në konvertim.

Transfonter-Google-Font-Konvertimi

Zgjidhni vetëm llojet e shkronjave që do të përdorni në faqen tuaj të internetit …

Google-Fonts-Konvertimi-Selection

Hapi 4: Shkarkoni skedarët e konvertuar të shkronjave

Pasi të konvertohen shkronjat, mund t’i shkarkoni. Në skedarin zip, secili font do të përfshijë formatet WOFF dhe WOFF2 (pasi kemi shkarkuar 2 shkronja, do të kemi gjithsej 4 skedarë fontesh).

WOFF-Google-Font-Konvertimi

Hapi 5: Ngarko skedarët e shkronjave në skedarët WordPress

Vendosni skedarët e shkronjave në internet përmes FTP ose cPanel, në mënyrë ideale në wp-content / Ngarkimet dosje në mënyrë që tematika dhe azhurnimet thelbësore të mos i tejkalojnë ato. Unë krijova një dosje “font” dhe i ngarkova atje (për t’i ndarë ato nga skedarët e tjerë). Për të konfirmuar se ato janë ngarkuar me sukses dhe ju keni lidhjet e sakta, hapni lidhjet në shfletuesin tuaj dhe shkronjat duhet të fillojnë të shkarkohen.

shembull:

  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff2
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Bold.woff
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Bold.woff2

zëvendësoj yourwebsite.com me faqen tuaj të internetit (dhe HTTPS nëse përdorni SSL). Në mënyrë ideale, provoni të katër lidhjet dhe sigurohuni që keni URL të sakta (dhe gjithashtu sigurohuni t’i ruani ato diku).

Hapi 6: Shtoni font të personalizuar në CSS

Tjetra, ne do të shtojmë CSS që ju keni brenda skedarit zip të shkarkuar me emrin stylesheet.css. Ky është kodi CSS që do të lidhë shkronjat tuaja me CSS tuaj ekzistues dhe do t’i bëjë ato gati për t’u përdorur.

Ku ta vendosni kodin CSS është subjektiv, por mund të përdorni një fletë të jashtme stili ose WordPress ‘ wp_enqueue_style funksionojnë në funksione.php, ose në fillimin e juaj style.css skedar (ose custom.css nëse e keni një). Do ta ngjisim atë në skedarin e paracaktuar të stilit.css të temës. Kopjoni / ngjitni kodin në fletën e stilit dhe ndryshoni çdo URL relative në URL absolute.

URL të paracaktuar në fletën e stileve.css:
src: url (‘Roboto-Bold.woff2’) format (‘woff2’),
formati url (‘Roboto-Bold.woff’) (‘mashtrim’);

Ndryshoni këto në:
src: url (‘http://yourwebsite.com/wp-content/uploads/fonts/Formati Roboto-Regular.woff2 ‘(‘ woff2 ‘),
url ( ‘http://yourwebsite.com/wp-content/uploads/fonts/Formati Roboto-Regular.woff ‘) (‘ mashtrim ‘);

Në thelb, thjesht përfshini URL-në e dosjes përpara skedarit të skedarit.

Kjo është opsionale, por nëse preferoni, krijoni një klasë të personalizuar për të përdorur me lehtësi fontin në HTML ekzistues. Këtu kemi emëruar klasat tona roboto_font dhe roboto_bold_font. Për ta bërë këtë, shtojeni këtë në skedarin tuaj të stilit.css (pas kodit të mësipërm):

.roboto_font

font-familje: “Roboto”, “Arial”, sans-serif;

}

.roboto_bold_font

font-familje: “Roboto”, “Arial”, sans-serif;

pesha e shkronjave: e theksuar;

}

Hapi 7: Testoni fontin

Tani krijoni një faqe provë dhe vendosni kodin e mëposhtëm në Redaktori i tekstit

Duke testuar

Testi i shkronjave me porosi

Testi i shkronjave me porosi

Google Fonts-Testing

Paraprakisht faqe. Nëse e keni bërë atë si duhet, duhet të shihni fontin e ri me porosi! Titulli i parë është fonti i paracaktuar i faqes suaj të internetit, e dyta dhe e treta janë shkronjat e shkronjave Google që shtuam:

Lokale-Google-Fonts

Hapi 8: Vendosni fontin e paracaktuar

Për ta bërë këtë fontin e paracaktuar të faqes suaj të internetit, shtoni këtë CSS në skedarin tuaj të stilit.css:

trupi

font-familje: “Roboto”, “Arial”, sans-serif;

}

Bej kujdes! Nëse tashmë keni një font të personalizuar, mund të mos duket si duhet dhe të kërkojë korrigjim ose redaktim të pronave ekzistuese të familjes font dhe t’i zëvendësojë ato me këtë në vend.

Hapi 9: Gjithmonë Bëni Font Fallbacks

Practiceshtë praktikë e keqe të aplikoni një Font Google si një familje me shkronja. Në vend të kësaj, duhet të keni shkronja të shumta të specifikuara, përfshirë fontet e zakonshme, të tilla si Arial, Times New Roman, në mënyrë që shfletuesi të rrihet përsëri në këto shkronja, vetëm në rast se fonti nuk ngarkon ose kërkon më shumë kohë për tu ngarkuar.

Pa kthim:
font-familje: ‘Roboto’;

Me shkronjë kthyese:
font-familje: ‘Roboto’, Arial, sans-serif;

Tani, në rast se nuk arrin të ngarkojë Fonts Google tuaj, shfletuesi do të bjerë përsëri në fontin Arial ose llojin e paracaktuar të fontit sans-serif të sistemit dhe nuk do të shkaktojë ndonjë problem me interpretimin e shkronjave.

Provoni përsëri Uebfaqen Tuaj (Në GTmetrix)

Ju nuk duhet të shihni ndonjë gabim të shkronjave të Google në të …

New-GTmetrix-Report.png

Keni pyetje? Më lësh një rresht.

Pyetjet e bëra më shpesh

&# X2705; Si i shpejtoni Fonts Google?

Kombinimi i shkronjave të Google, pritja e tyre në vend, dhe prenotektimi dhe prefektimi i tyre, të gjithë mund të ndihmojnë në përmirësimin e kohës së ngarkesës së tyre. Kontrolloni Ujëvaren tuaj GTmetrix për të marrë një pikë referimi të shkronjave tuaja, pastaj rivarroni atë pasi të keni optimizuar.

&# X2705; Si të konvertoni shkronjat e skedarëve të shkronjave në internet?

Ne përdorim Transfonterin.

&# X2705; Po në lidhje me shkronjat me porosi të Elementor?

Fonts Custom Elementor gjithashtu mund të presin Fonts Google në vend dhe është i integruar në Elementor Pro. Ju mund ta përdorni këtë për të ngarkuar skedarët tuaj font.

&# X2705; Cilat shtojca ndihmojnë në optimizimin e shkronjave?

Rocket WP, OMGF, Autoptimize dhe Perfmatters të gjithë mund t’ju ndihmojnë të zgjedhni fontet.

&# X2705; Po në lidhje me paracaktimin dhe paracaktimin e shkronjave?

Këto mund të shpejtojnë shkronjat duke ndihmuar shfletuesit t’i parashikojnë ato më mirë. Ne përdorim shtojcën Perfmatters nga Kinsta për të paravendosur dhe paraprakizuar shkronjat, por mund të përdorni gjithashtu WP Rocket ose shtojcën e Burimeve të Burimeve të Para Partisë.

Gëzuar,
Usama

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