Slik legger du til Google Web-skrifter i WordPress-temaer på den “riktige” måten

Google-skrifter er en fantastisk gratis ressurs for webdesignere. I WPBv4 har vi begynt å bruke en populær Google Font-kombinasjon: Oswald og Lora. Noen av brukerne våre har spurt oss om hvordan du legger til Google Web-skrifter i WordPress-temaer. Hvis du husker det, viste vi hvordan du legger til Google-skrifter i WordPress Post Editor. I denne artikkelen vil vi vise deg hvordan du legger til Google Web-skrifter i WordPress-temaene dine Riktig måte, optimalisert for ytelse.


Finn Google Web-skrifter som du liker

Det første du trenger å gjøre er å finne en Google-font du liker. Gå videre til Google-skrifter og bla gjennom biblioteket. Når du finner skrifttypen du liker, klikker du på “Quick-bruk” knapp.

Hurtigbruk-skrifter fra Google-skrifter

Når du har klikket på hurtigbruksknappen, blir du ført til en ny side. Bla nedover til du ser bruksinstruksjonsboksen med kode som du kan legge til på nettstedet ditt.

Innbyggingskode for Google-font

Du vil se at det er tre forskjellige faner for å legge til skriften på nettstedet ditt. Den første er standard og anbefalt metode for å legge til Google-skrifter på nettstedet ditt. Den andre fanen bruker @import CSS-metoden, og den siste fanen bruker JavaScript-metoden.

Vi viser deg hvordan du bruker hver av disse metodene, og hva er fordeler og ulemper.

Videoopplæring

Abonner på WPBeginner

Hvis du ikke liker videoen eller trenger flere instruksjoner, kan du fortsette å lese.

Legge til Google Web-skrifter i WordPress-temaer

Vi har stort sett sett folk som bruker de to første metodene.

Den enkleste måten ville være å åpne temaet ditt style.css arkiver og lim inn skrifttypekoden du har i @import-fanen, slik:

@import url (https://fonts.googleapis.com/css?family=Lora);
@import url (https://fonts.googleapis.com/css?family=Oswald);

Du kan også kombinere flere skriftforespørsler til en. Slik gjør du det:

@import url (https://fonts.googleapis.com/css?family=Lora|Oswald);

Denne metoden er superenkelig, men det er ikke den beste måten å legge til Google-skrifter på WordPress-nettstedet ditt. Ved å bruke @import-metoden blokkeres parallelle nedlastinger, noe som betyr at nettleseren vil vente til den importerte filen er ferdig med nedlastingen før den begynner å laste ned resten av innholdet.

Hvis du MÅ bruke @import, må du i det minste kombinere flere forespørsler til en.

Ytelsesoptimalisert metode for å legge til Google Web Font

Den beste måten å legge til Google-skrifter på er ved å bruke standardmetoden som bruker koblingsmetoden i stedet for importmetoden. Bare ta font-URL-en du fikk fra trinn 1. Hvis du legger til flere skrifter, kan du kombinere de to skrifttypene med en | karakter. Plasser deretter koden i hoveddelen av temaet.

Du vil sannsynligvis måtte redigere header.php-filen din, og lime inn følgende kode over hovedstilen. Eksemplet vil se slik ut:

I utgangspunktet er målet å legge skriftforespørselen så tidlig som mulig. I følge Google Web Fonts-bloggen, hvis det er en skriptkode før @ font-face-erklæringen, vil Internet Explorer ikke gjengi noe på siden før fontfilen er lastet ned.

Når du har gjort det, kan du ganske enkelt begynne å bruke den i temaets CSS-fil som denne:

h1 {
font-family: ‘Oswald’, Helvetica, Arial, serif;
}

Nå er det mange temarammer og barnetemaer der ute. Det anbefales IKKE å endre filene til foreldertemaet ditt spesielt hvis du bruker et temarammeverk, fordi endringene dine blir overstyrt neste gang du oppdaterer rammen. Du må bruke krokene og filtrene som er presentert for deg av det overordnede temaet eller rammen for å legge til Google-skrifter ordentlig i barnetemaene..

Korrekt anskaffelse av Google-skrifter i WordPress

En annen måte å legge til Google-skrifter på WordPress-nettstedet ditt er ved å markere skriften i temaets funksjoner.php-fil eller et nettstedspesifikt plugin.

funksjon wpb_add_google_fonts () {

wp_enqueue_style (‘wpb-google-fonts’, ‘https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300’, falsk);
}

add_action (‘wp_enqueue_scripts’, ‘wpb_add_google_fonts’);

Ikke glem å erstatte fontkoblingen med din egen.

Laster inn Google-skrifter ved hjelp av JavaScript

For denne metoden må du kopiere koden i JavaScript-fanen i bruksanvisningen for Google-skrifter. Du kan lime inn denne koden i temaet eller header.php-filen til ditt tema rett etter taggen.

Det siste tipset vårt om å bruke Google Web-skrifter på nettstedet ditt vil være å ikke laste inn skrifter du ikke vil bruke. Hvis du for eksempel bare vil ha fet og normal vekt, må du ikke legge til alle de andre stilene.

Vi håper at denne artikkelen hjalp deg å legge til Google Web-skrifter i WordPress-temaene på riktig måte, slik at nettstedet ditt kan lastes raskt. Det kan også være lurt å sjekke ut vår guide for hvordan du legger til Typekit-skrifter i WordPress.

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