Slik laster du inn Google-skrifter lokalt i WordPress: Et optimaliseringselement funnet i GTmetrix, Pingdom og Google PageSpeed ​​Insights

Hvis ditt WordPress-nettsted har Google Font feil i GTmetrix/Pingdom, laste inn Google-skrifter lokalt bør fikse dem.


Du kan ikke kontrollere noen eksterne ressurser og skript, noe som gjør dem umulige å komprimere, minifisere eller optimalisere. Dette kan påvirke WordPress-hastigheten din alvorlig. En av de vanligste eksterne ressursene er Google Font. Hvis du allerede har konfigurert en cache-plugin som WP Rocket eller WP Fastest Cache, kan du begynne å merke eksterne ressurser som skrifter som påvirker karakterer + lastetider. Det er her innlasting av Google Fonts kommer i spill. Dette gjør at hurtigbuffertillegget ditt kan komprimere alle ressurser relatert til den tilpassede skriften (e).

Ta en full sikkerhetskopi av nettstedet ditt (eller i det minste filene du redigerer) før du gjør endringer.

Google-Fonts-GTmetrix

Trinn 1: Velg et Google-skrift

I dette eksemplet vil vi bruke Roboto font med to skriftvekter: vanlig (400) og fet (700).

Google-Fonts-markering

Bruk færre Google-skrifter – hold Google-skrifttypene dine til et minimum (mindre skrifter = mindre forespørsler).

Vær selektiv med fontvekter – antall vekter påvirker også belastningstider. Hvis du bare trenger den dristige versjonen, fjerner du merket for de andre vektene slik at Google-skrifter bare laster inn de du trenger.

Trinn 2: Last ned skrifttypen

Last ned skriftene når du er klar. Google vil automatisk laste ned alle fontvekter, så valg av fontvekter er ikke nødvendig på dette trinnet, og i stedet kreves i trinn 3.

Google-Fonts-nedlasting

Trinn 3: Konverter skrifter til nettfonter

Deretter konverterer vi disse fontfilene (.ttf) til webfontfiler. Jeg bruker Transfonter. Gå til nettstedet deres, klikk Legg til skrifter, deretter last opp bare skrifttypene du bruker på nettstedet ditt. Jeg bruker Roboto-Regular.ttf og Roboto-Bold.ttf så jeg har både vanlige og dristige vekter. La innstillingene være standard, siden WOFF og WOFF2 dekker alle større nettlesere. Nå klikker du konvertere.

Transfonter-Google-Font-konvertering

Velg bare skrifttypene du vil bruke på nettstedet ditt …

Google-Fonts-konvertering-markering

Trinn 4: Last ned konverterte fontfiler

Når skriftene er konvertert, kan du laste dem ned. I zip-filen vil hver font inneholde WOFF- og WOFF2-formater (siden vi lastet ned 2 skrifter, vil vi ha totalt 4 fontfiler).

WOFF-Google-Font-konvertering

Trinn 5: Last opp fontfiler til WordPress-filer

Last opp nettstedsfilene via FTP eller cPanel, ideelt sett i wp-innhold / opplasting mappen slik at tema og kjerneoppdateringer ikke tilsidesetter dem. Jeg opprettet en “fonts” -mappe og lastet dem opp der (for å skille dem fra andre filer). For å bekrefte at de ble lastet opp og du har de riktige koblingene, åpner du lenkene i nettleseren din, og skriftene skal begynne å laste ned.

Eksempel:

  • 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

Erstatte yourwebsite.com med ditt eget nettsted (og HTTPS hvis du bruker SSL). Test ideelt sett alle de fire koblingene, og sørg for at URL-ene er riktige (og husk å lagre dem et sted).

Trinn 6: Legg tilpasset skrift til CSS

Neste, vil vi legge til CSS du fikk i den nedlastede zip-filen som heter stylesheet.css. Dette er CSS-koden som vil koble skriftene dine med din eksisterende CSS og gjøre dem klar til bruk.

Hvor du kan plassere CSS-koden er subjektiv, men du kan bruke et eksternt stilark eller WordPress ‘ wp_enqueue_style funksjon i features.php, eller ved starten av din style.css fil (eller custom.css hvis du har en). Jeg kommer til å lime den inn i standardstil.css-filen for temaet. Kopier / lim inn koden i stilarket, og endre eventuelle relative nettadresser til absolutte nettadresser.

Standard nettadresser i stylesheet.css:
src: url (‘Roboto-Bold.woff2’) format (‘woff2’),
url (‘Roboto-Bold.woff’) format (‘woff’);

Endre disse til:
src: url (‘http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff2 ‘) -format (‘ woff2 ‘),
url (‘http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff ‘) -format (‘ woff ‘);

I utgangspunktet er det bare å inkludere mappen URL før font filnavn.

Dette er valgfritt, men hvis du foretrekker det, oppretter du en tilpasset klasse for enkelt å bruke skriften i eksisterende HTML. Her kåret vi klassene våre roboto_font og roboto_bold_font. For å gjøre dette, legg dette til i stil.css-filen din (etter koden ovenfor):

.roboto_font {

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

}

.roboto_bold_font {

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

font-vekt: fet;

}

Trinn 7: Test skrifttypen

Opprett nå en testside og plasser følgende kode i Tekstredaktør

testing

Tilpasset fonttest

Tilpasset fonttest

Google-Fonts-testing

Forhåndsvis siden. Hvis du gjorde det riktig, bør du se den nye tilpassede skriften! Den første overskriften er standardfonten på nettstedet ditt, den andre og den tredje er Google-skrifttypene vi la til:

Lokal-Google-fonter

Trinn 8: Angi standard skrifttype

Hvis du vil gjøre dette til standardtypen til nettstedet ditt, legger du denne CSS til din style.css-fil:

kropp {

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

}

Vær forsiktig! Hvis du allerede har en tilpasset font, kan det hende at den ikke vises riktig og krever feilsøking eller redigering av eksisterende fontfamilieegenskaper og erstatt dem med denne i stedet.

Trinn 9: Ha alltid Font Fallbacks

Det er dårlig praksis å bruke en Google Font som en fontfamilie. I stedet bør du ha flere skrifter som er spesifisert, inkludert vanlige skrifter som Arial, Times New Roman, slik at nettleseren kan falle tilbake til disse skriftene bare i tilfelle skriften ikke lastes eller tar lengre tid å laste.

Uten tilbakeslag:
font-family: ‘Roboto’;

Med fallback font:
font-family: ‘Roboto’, arial, sans serif;

I tilfelle den ikke klarer å laste inn Google-skrifttypene dine, vil nettleseren falle tilbake til Arial-skrifttypen eller standard sans-serif-fonttypen til systemet og ikke forårsake noen problemer med skrifttildelingen.

Test nettstedet ditt på nytt (I GTmetrix)

Du bør ikke se noen Google-fonts feil i det …

New-GTmetrix-Report.png

Har du spørsmål? Slipp meg en linje.

ofte stilte spørsmål

&# X2705; Hvordan fremskynder du Google Fonts?

Ved å kombinere Google-skrifter, være vert for dem lokalt og forhåndsforbinde og forhåndsføre dem, kan alle bidra til å forbedre belastningstiden. Sjekk GTmetrix Waterfall for å få et mål for skrifttypene dine, og prøv deretter på nytt etter å ha optimalisert.

&# X2705; Hvordan konvertere skrifter webfontfilene?

Vi bruker Transfonter.

&# X2705; Hva med Elementor tilpassede skrifter?

Elementor Custom Font kan også være vert for Google Fonts lokalt og er innebygd i Elementor Pro. Du kan bruke dette til å laste opp fontfiler.

&# X2705; Hvilke plugins hjelper til med å optimalisere skrifter?

WP Rocket, OMGF, Autoptimize og Perfmatters kan alle hjelpe deg med å optimalisere skrifter.

&# X2705; Hva med forhåndshenting og forhåndsforbindelse av skrifter?

Disse kan få fart på skriftene ved å hjelpe nettlesere med å forutse dem bedre. Vi bruker Perfmatters-plugin av Kinsta for å forhåndshente og forhåndsforbinde skrifter, men du kan også bruke WP Rocket eller Pre Party Resource Hints plugin.

Jubel,
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