Hoe om Google-lettertipes plaaslik in WordPress te laai: ‘n Optimaliseringsitem wat in GTmetrix, Pingdom en Google PageSpeed ​​Insights gevind word

As u WordPress-webwerf het Google Font foute in GTmetrix/Pingdom, Google-lettertipes plaaslik gelaai word, moet dit regmaak.


U kan sekere eksterne bronne en skrifte nie beheer nie, wat dit onmoontlik maak om saam te pers, te minifiseer of te optimaliseer. Dit kan u WordPress-snelheid ernstig beïnvloed. Een van die mees algemene eksterne bronne is Google Fonts. As u reeds ‘n cache-inprop soos WP Rocket of WP Fastest Cache opgestel het, kan u eksterne bronne opmerk soos lettertipes wat grade + laai tye beïnvloed. Dit is hier waar die laai van Google Fonts plaaslik speel. Hiermee kan u cache-inprop alle bronne wat met u pasgemaakte lettertipe (s) verband hou, saamgepers.

Neem ‘n volledige rugsteun van u webwerf (of ten minste die lêers wat u tans bewerk) voordat u veranderings aanbring.

Google-Fonts-GTmetrix

Stap 1: Kies ‘n Google-lettertipe

In hierdie voorbeeld gebruik ons Roboto font met twee skrifgewigte: gereeld (400) en vet (700).

Google-Fonts-Seleksie

Gebruik minder Google-lettertipes – hou u Google-lettertipes tot ‘n minimum (minder lettertipes = minder versoeke).

Wees selektief met skrifgewigte – die aantal gewigte beïnvloed ook vragtye. As u net die vetgedrukte weergawe benodig, moet u die ander gewigte verwyder, sodat Google-lettertipes slegs die wat u benodig, laai.

Stap 2: Laai die lettertipe af

Laai die lettertipes af wanneer u gereed is. Google sal outomaties alle lettertipe-gewigte aflaai, dus is die keuse van lettertipe-gewigte nie nodig in hierdie stap nie, en word dit eerder in stap 3 vereis.

Google-Fonts-aflaai

Stap 3: Omskep lettertipes na webfonte

Vervolgens sal ons hierdie lettertipe-lêers (.ttf) omskakel na weblettertipe-lêers. Ek gebruik dit Transfonter. Gaan na hul webwerf, klik Voeg lettertipes by, dan laai slegs die lettertipes wat u gebruik op u webwerf op. Ek gebruik Roboto-Regular.ttf en Roboto-Bold.ttf dus het ek gereelde sowel as vet gewigte. Laat die instellings standaard, aangesien WOFF en WOFF2 alle belangrike blaaiers dek. Klik nou op skakel.

Transfonter-Google-Font-Conversion

Kies slegs die lettertipes wat u op u webwerf gaan gebruik …

Google-Fonts-Gesprek-Seleksie

Stap 4: Laai omgeskakelde lettertipe-lêers af

Sodra die lettertipes omgeskakel is, kan u dit aflaai. In die zip-lêer sal elke lettertipe WOFF- en WOFF2-formate bevat (aangesien ons altesaam 2 lettertipes afgelaai het, sal ons altesaam 4 lettertipes hê).

WOFF-Google-Font-Conversion

Stap 5: Laai lettertipes na WordPress-lêers op

Laai die weblettertipe-lêers op via FTP of cPanel, ideaal in die wp-content / uploads vouer sodat die tema en kernopdaterings dit nie ignoreer nie. Ek het ‘n “lettertipes” -map geskep en dit daar gelaai (om dit van ander lêers te skei). Om te bevestig dat hulle suksesvol opgelaai is en dat u die regte skakels het, moet u die skakels in u blaaier oopmaak en die lettertipes moet begin aflaai.

voorbeeld:

  • 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

vervang yourwebsite.com met u eie webwerf (en HTTPS as u SSL gebruik). Die beste is om al 4 skakels te toets en seker te maak dat u die URL’s korrek het (en u moet dit ook êrens stoor).

Stap 6: Voeg pasgemaakte lettertipe by CSS

Vervolgens voeg ons die CSS wat u gekry het by die genoemde zip-lêer stylesheet.css. Dit is die CSS-kode wat u lettertipes met u bestaande CSS sal verbind en gereed is om te gebruik.

Waar om die CSS-kode te plaas, is subjektief, maar u kan ‘n eksterne stylblad gebruik of die WordPress ‘ wp_enqueue_style funksie in features.php, of aan die begin van u style.css lêer (of custom.css as u een het). Ek gaan dit plak in die standaard style.css-lêer van die tema. Kopieer / plak die kode in die stylblad en verander die relatiewe URL’s na absolute URL’s.

Verstek URL’s in styleheet.css:
src: url (‘Roboto-Bold.woff2’) formaat (‘woff2’),
url (‘Roboto-Bold.woff’) formaat (‘woff’);

Verander dit na:
src: url (‘http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff2 ‘) -formaat (‘ woff2 ‘),
url ( ‘http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff ‘) -formaat (‘ woff ‘);

Voeg slegs die URL van die gids voor die letternaam in.

Dit is opsioneel, maar maak ‘n pasgemaakte klas as u verkies om die lettertipe in bestaande HTML maklik te gebruik. Hier het ons ons klasse benoem roboto_font en roboto_bold_font. Om dit te doen, voeg dit by u styl.css-lêer (na bogenoemde kode):

.roboto_font {

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

}

.roboto_bold_font {

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

fontgewig: vet;

}

Stap 7: Toets die lettertipe

Skep nou ‘n toetsblad en plaas die volgende kode in die Teksredakteur

toets

Aangepaste lettertoets

Aangepaste lettertoets

Google-Fonts-toets

Voorbeskou die bladsy. As u dit korrek gedoen het, sal u die nuwe pasgemaakte lettertipe moet sien! Die eerste opskrif is die standaard lettertipe van u webwerf, die tweede en derde is die Google-lettertipes wat ons bygevoeg het:

Plaaslike-Google-Fonts

Stap 8: Stel die standaard lettertipe in

Voeg hierdie CSS by u style.css-lêer om hierdie van u webwerf se standaardtipe te maak:

liggaam {

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

}

Wees versigtig! As u reeds ‘n pasgemaakte lettertipe het, sal dit moontlik nie korrek verskyn nie en moet u die bestaande font-familie-eienskappe ontfout of redigeer en in plaas daarvan vervang word met hierdie een.

Stap 9: Het altyd lettertipes teruggevoer

Dit is ‘n slegte praktyk om ‘n Google Font as fontfamilie toe te pas. In plaas daarvan, moet u veelvuldige lettertipes hê wat gespesifiseer word, insluitend die gewone lettertipes soos Arial, Times New Roman, sodat die blaaier op hierdie lettertipes kan terugval, net vir die geval dat die font nie laai of langer neem om te laai nie..

Sonder terugval:
font-familie: ‘Roboto’;

Met ‘n terugval lettertipe:
font-familie: ‘Roboto’, Arial, sans-serif;

As dit nie u Google-lettertipe laai nie, sal die blaaier terugval na die Arial-lettertipe of die standaard sans-serif-fonttipe van die stelsel en dit veroorsaak geen probleme met die weergawe van die lettertipe nie.

Probeer u webwerf weer (in GTmetrix)

U behoort geen foute met Google Fonts daarin te sien nie …

Nuwe-GTmetrix-Report.png

Het u vrae? Stuur my ‘n boodskap.

Algemene vrae

&# X2705; Hoe bespoedig u Google Fonts??

As u Google-lettertipes kombineer, hulle plaaslik huisves, hulle vooraf verbind en voorafwerk, kan dit alles help om hul laai te verbeter. Gaan u GTmetrix-waterval na om ‘n maatstaf van u lettertipes te kry, en toets dit dan weer na optimering.

&# X2705; Hoe om die lettertipes van die weblettertipes te omskep?

Ons gebruik Transfonter.

&# X2705; Wat van Elementor-aangepaste lettertipes?

Elementor-aangepaste lettertipes kan ook Google-lettertipes plaaslik huisves en is ingebou in Elementor Pro. U kan dit gebruik om u fontlêers op te laai.

&# X2705; Watter plugins help om lettertipes te optimaliseer?

WP Rocket, OMGF, Autoptimize en Perfmatters kan u help om lettertipes te optimaliseer.

&# X2705; Wat van lettertipes wat vooraf gekies en gekoppel is??

Dit kan die lettertipes vinniger maak deur blaaiers te help om hulle beter te laat voorspel. Ons gebruik die Perfmatters-inprop deur Kinsta om lettertipes voor te haal en vooraf te koppel, maar u kan ook WP Rocket of die voorpartytjie-hulpbronwenk-inprop gebruik.

Cheers,
Osama

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