Bygge inn Google-fonter i Wordpress-nettstedet

click fraud protection

Google Fonts ble den viktigste ressursen for tilpasset netttypografi siden utviklingen i 2010. Det er tre hovedgrunner til at Google ble frontløper her. For det første var det ingen skrifttjenester som var anstendige nok, så Google fylte tomrommet. For det andre, selv i begynnelsen var variasjonen de tilbød relativt stor. For tiden er det over 800 fonter tilgjengelig i en rekke stiler. For det tredje er disse skriftene tilgjengelige gratis, noe som gjør dem spesielt attraktive.

I tillegg er de overraskende enkle å integrere i designprosjektene dine. Vi viser deg hvordan du kan inkludere disse Google-fontene på WordPress-nettstedet ditt.

Google Fonts

For å begynne må du velge skriften du vil jobbe med. Det finnes en rekke alternativer, så du har en ganske stor meny å velge mellom. Du finner dem ved å gå over til Googles skriftside. Hvis du leter etter en spesifikk font, skriv ganske enkelt inn navnet på skriften i søkeboksen, og den skal komme opp med et eksempel.

Det er også andre søkeparametere du kan bruke. Rett under søkeboksen er en knapp som heter Kategorier. Hvis du klikker på dette, vil det avsløre en rullegardinmeny med fem alternativer. Disse er som følger:

  • Serif – Dette er skrifter med korte linjer som stammer fra de øvre og nedre strekene på en bokstav. Times New Roman og Sylfaen er gode eksempler.
  • Sans Serif – Som navnet antyder, er dette fonter uten de små linjene. De har en tendens til å ha en enkel og ren estetikk.
  • Display – Dette er det som kan kalles oppsiktsvekkende fonter. De er best for overskrifter i stedet for lang tekst.
  • Håndskrift – Disse fontene får det til å virke som om noen har skrevet dem for hånd. Du vil finne at mange er i kursiv eller har mindre konsistente mellomrom.
  • Monospace - Som en skrivemaskin har bokstavene deres samme horisontale bredde. De er veldig jevnt fordelt.

I tillegg til disse har du også andre alternativer å velge mellom, som å velge språk og skriftegenskaper. Sistnevnte inkluderer antall stiler, tykkelse, skråning og bredde.

Bygge inn fonter i WordPress

Hvis du ønsker å inkludere disse unike fontene på WordPress-siden din, er det flere metoder du kan prøve.

Bruker CSS

Klikk på skrifttypen fra Googles valg, og den tar deg til den detaljerte skriftsiden. I øvre høyre hjørne er det et "+"-tegn. Klikk på det og et sidevindu åpnes. Klikk på "Bygg inn."

Nå kan du klikke @import. Dette vil åpne CSS-koden som du må kopiere. Gå til WordPress-temaets stilark og lim det inn i begynnelsen. Pass på at du har kopiert importkoblingen uten  parenteser. Pass på at du lagrer, så har du lagt til skriften.

Bruker PHP

Følg de første trinnene og kopier koblingen du får etter å ha klikket på "+"-tegnet. Nå er det bare å legge det til i temaets header.php-fil. Husk å lagre for at skriften skal legges til.

Bruke en Javascript-funksjon

Du kan også prøve noe som kalles "kø". Du må bruke funksjonen wp_enqueue_style for dette. Gjennom denne metoden kan du legge til den valgte fonten i overskriften på alle nettsidene dine. Det er en fin måte å legge til flere endringer samtidig.

Bare hent lenken til fonten (fra http til ”), og legg denne til temaets functions.php fil med ekstra kode rundt. Her er koden du må bruke:

funksjon custom_add_google_fonts() {

wp_enqueue_style( ‘custom-google-fonts’, https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap, usant );

}

add_action( ‘wp_enqueue_scripts’, ‘custom_add_google_fonts’ );

Alle av disse alternativene vil fungere fint for å integrere Google Fonts i WordPress-nettstedet ditt, så det er viktig å velge den du føler deg mest komfortabel med.