Legge til tilpassede skrifter til WordPress


Slik legger du til tilpassede skrifter til WordPress


Å velge riktig font for ditt WordPress-nettsted er en sentral del av webdesign og nettstedsmerke.

Som farger, bilder og andre elementer, typografi spiller en stor rolle i hvordan nettstedet ditt oppfattes av besøkende.

Heldigvis er WordPress-skrifter en av de mange tingene du fritt kan tilpasse. Du kan bruke stort sett hvilken som helst gratis tilpasset font på det WordPress-nettstedet du ønsker.

Vi dekker alt du trenger å vite om WordPress-skrifter:

  • A) Hvordan legge til tilpassede skrifter til WordPress (manuelt)
  • B) Hvordan legge til tilpassede skrifter til WordPress (via plugin)
  • Hvorfor bruke tilpassede skrifter på WordPress
  • Hvor finner du egendefinerte skrifter
  • Konklusjon

A) Hvordan legge til tilpassede skrifter til WordPress manuelt

Når det gjelder å legge til tilpassede skrifter til WordPress for hånd, har du tre hovedalternativer: HTML, JavaScript og CSS. Det er fordeler og ulemper med hver metode, og hvilken som er den rette for deg, avhenger av oppsettet ditt. Ikke bekymre deg, vi vil gå gjennom hver av dem i detalj.

1. Bruke CSS og @importere

La oss starte med den minst anbefalte metoden. Hvis du planlegger å installere tilpassede skrifttyper fra Google Font, har du kanskje lagt merke til at den har en fane merket @importere. Tjenesten gir deg et stykke CSS-kode.

importfanen i google-skrifter

Du kan enten ta den som den er og sette den inn i overskriften din (mer om det nedenfor) eller kopiere den uten >parentes til begynnelsen av temaet ditt (eller enda bedre, barnetema) style.css fil.

/ *
Temanavn: Tjue sytten barn
Tema URI: https://wordpress.org/themes/twentyseventeen/
Mal: twentyseventeen
Forfatter: WordPress-teamet
Forfatter URI: https://wordpress.org/
Versjon: 1.0

* /

@import url ('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');


/ * ytterligere CSS går her * /

Hvis du gjør det, lastes skriften inn på nettstedet ditt fra stilarket. Det virker som en enkel løsning, ikke sant? Hvorfor er det da minst anbefalt?

Årsaken er ytelsesproblemer. Ved hjelp av @importere er ikke lenger den anbefalte veien å gå fordi det forhindrer nettlesere fra å laste ned flere stilark på en gang. Konsekvensen: tregere lastetid for side. Hold deg unna det hvis du kan.

2. Bruke en WordPress malfil

En annen metode for å få skrifttypene på nettstedet ditt er å ta koden som er gitt av fontbibliotekene og kopiere dem på ditt header.php malfil. De fleste standard WordPress-temaer har det.

Sørg for å plassere den et sted mellom og braketter. På den måten vil skriften lastes når en side lastes inn.

skriv inn google fonts code i wordpress header

Hvis du bruker et barn-tema, må du huske å kopiere foreldertemaet header.php fil i temakatalogen for barn og gjør endringene der inne.

Noen temaer har innstillinger som lar deg legge til tilpasset kode i toppteksten og bunnteksten via backend. Dette er også et levedyktig alternativ.

3. Bruke @ Font-face

Så langt har vi bare snakket om hvordan du bruker tilpassede skrifter i WordPress som er vert et annet sted, nemlig serverne til Google og Adobe. Det er imidlertid også mulig å være vert for skrifter på ditt eget nettsted og tilby dem til besøkende nettlesere derfra.

For å gjøre dette, må du først laste ned den aktuelle skriften. Husker du nedlastingsknappen på Google Font? Den vil bli nyttig nå. Andre leverandører lar deg også laste ned skrifter.

Når du gjør det, må du sørge for at du får det i et format på nettet. Det betyr TTF, OTF eller WOFF. Du finner mer informasjon om det her. Hvis du ikke har riktig nettstedsformat, kan du også bruke det denne tjenesten å konvertere skrifttypen din til en støttet en.

Når du har fontfilene klare, må du laste dem opp til WordPress-nettstedet ditt via FTP. Et godt sted å oppbevare dem er i en underkatalog av navnet ditt barn fonter (kreativ, vi vet).

Etter det må du laste inn skriften i stilarket ditt via @ Font-face. Slik ser det ut:

@ font-face {
font-familie: Roboto;
src: url (http: //localhost/wordpress/wp-content/themes/twentyseventeen-child/fonts/Roboto-Regular.ttf);
font-vekt: normal;
}

Husk å erstatte navnet på skriften og adressen for stedet på ditt eget nettsted. Etter det kan den nye tilpassede skriften din brukes.

Imidlertid er dette heller ikke den beste løsningen, spesielt ytelsesmessig. Googles servere er sannsynligvis raskere enn dine, og derfor er det sannsynligvis den beste løsningen å laste inn tilpassede skrifter derfra.

4. Forkynne skrifter - "WordPress Way"

Hvis du virkelig vil legge til tilpassede skrifter til WordPress på riktig måte, vil du bruke dine functions.php fil (inne i katalogen til det nåværende aktive temaet) og funksjonen  wp_enqueue_script eller wp_enqueue_style.

Med deres hjelp kan vi ta kodebitene levert av skriftsidene. I stedet for å kopiere dem til en fil, vil vi imidlertid legge dem til overskriften via en funksjon.

Hva er forskjellen mellom wp_enqueue_script og wp_enqueue_style? Som navnene antyder, er det én for å legge til skript, ett for stilark. Hvilken som er riktig å bruke avhenger av hvordan dine tilpassede skrifter leveres fra kilden.

For eksempel gir Google Fonts deg skrifter som stilark. I så fall vil du legge dem til ditt WordPress-nettsted på denne måten:

funksjon add_google_fonts () {
wp_enqueue_style ('google_web_fonts', 'https://fonts.googleapis.com/css?family=Open+Sans|Roboto');
}

add_action ('wp_enqueue_scripts', 'add_google_fonts');

I motsetning til det kommer skrifter fra Adobe Edge Web-skrifter som JavaScript. Derfor, for å anquege dem på nettstedet ditt, vil koden se slik ut:

funksjon add_adobe_fonts () {
wp_enqueue_script ('adobe_edge_web_fonts', '//use.edgefonts.net/open-sans.js');
}

add_action ('wp_enqueue_scripts', 'add_adobe_fonts');

Var det ikke så vanskelig, ikke sant? I tillegg får du ekstra poeng for å gjøre det på WordPress-måten.

5. Ring tilpassede skrifter i stilarket

Nå som skriftene er lagt til nettstedet ditt, kan du offisielt bruke dem. For å gjøre det, er det bare å legge til en deklarasjon for den nye skrifttypen på stilarket ditt. Hvis du for eksempel vil endre skriften for overskriftene, bruker du noe slikt:

h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Roboto';
}

Merk: Vær oppmerksom på hvordan tjenesten du bruker spesifiserer CSS-erklæringen for skriftene dine. På teststedet vårt kunne vi tilsynelatende ikke få Adobe Edge Web Fonts til å fungere fordi de kaller Open Sans i CSS med open-sans i motsetning til 'Open Sans' i Google-skrifter.

Det er det. Du vet nå hvordan du legger til tilpassede skrifter til WordPress manuelt. Gratulere selv, dette er litt kunnskap på neste nivå! Det er klart, de samme handlingene er mulig via plugins. Det er det vi vil snakke om videre.

B) Hvordan legge til tilpassede skrifter til WordPress via plugin

WordPress-sfæren ville ikke være hva det er hvis det ikke var flere plugin-løsninger for å legge til tilpassede skrifter til plattformen. Vi vil undersøke hvordan du bruker Enkel Google-skrifter, som er en av de mest populære plugins i dette området.

1. Installer plugin-modulen

Det første trinnet er å installere plugin-modulen. For å gjøre det, gå videre til Plugins> Installer nytt. Deretter søker du etter plugin-navnet. Klikk på i søkeresultatene Installere nå og aktiver plugin-modulen når den er på nettstedet ditt.

2. Legg til / endre skrifter på nettstedet ditt

Når programtillegget er aktivt, finner du et nytt menyelement som heter typografi under Utseende> Tilpass.

typografimeny i wordpress customizer

Når du klikker på den og velger Standard typografi, du finner en liste over kontroller for å endre skrifttypen til avsnitt og overskrifter.

enkle innstillinger for google fonter i wordpress customizer

Det er veldig enkelt å bruke dem. Bare klikk på rullegardinmenyen der det står Rediger font for den delen av nettstedet du vil endre det for. Dette gir deg tilgang til denne menyen:

enkle google-skrifter endre font

Her er den viktigste delen den under Font Family. Her kan du velge en ny skrifttype fra hele Google Font-biblioteket (bruk Script / Delsett for å begrense skriftvalg til de med spesialtegn).

Fontene er bestilt av standard-, serif-, sans-serif-, display-, håndskrift- og monospace-skrifter. Du kan imidlertid også ganske enkelt søke dem etter navn.

Når du klikker på en font, kan du forhåndsvise endringene i sanntid til høyre.

endret tilpasset font i enkle google-skrifter

3. Konfigurer skrifttypen

Når du har valgt en font, er det mange alternativer for å tilpasse typografien din ytterligere.

Først av alt kan du endre skriftvekt / stil under menyen med samme navn. Dette kontrollerer tykkelsen på bokstavene.

Videre under Tekstdekorasjon, Du kan legge til understreking, gjennomstrekning og overlinje. Teksttransform lar deg også sette den på alle koder, alle små bokstaver eller bokstaver hver første bokstav. Under Utseende fanen på toppen, kan du også kontrollere skriftfarge, bakgrunnsfarge, skriftstørrelse, linjehøyde og bokstavavstand.

utseendeinnstillinger i enkle google-skrifter

Til slutt, posisjonering lar deg endre andre innstillinger som margin, polstring, kantlinje, grensradius og visning.

posisjonsinnstillinger i enkle google-skrifter

Kort sagt, bør du kunne tilpasse skriftene på nettstedet ditt helt etter din smak. Lett, er det ikke? Ikke glem å slå Lagre og publiser øverst når du er fornøyd med endringene dine.

Det fungerer ikke, hva gjør jeg?

Noen ganger kan du ikke endre noen av skriftene på nettstedet ditt. Det skjer vanligvis når temaet du bruker kommer med ikke-standard CSS klasser og velgere for å style dem.

For eksempel, i temaet Twenty Sixteen, er blogginnleggstitler ikke bare definert som H1, men har også en CSS-klasse kalt .entry-tittelen. Av den grunn kan ikke plugin-en endre dem.

For å avhjelpe dette problemet, må du opprette en såkalt fontkontroll under Innstillinger> Google-skrifter.

legg til fontkontroll i enkle google-skrifter

Du kan knytte CSS-velgere til ny kontroll og tvinge overstyring når det er nødvendig. Etter at du har gjort det, er den nye fontkontrollen tilgjengelig som et tilleggsalternativ i WordPress Customizer under Tematypografi. Lett peasy.

Andre tilpassede skrifter WordPress-plugins

Det er også andre WordPress-plugins som er tilgjengelige for å legge til tilpassede skrifter:

  • Bruk hvilken som helst skrift - Det hjelper deg å bruke opplastede skrifter uten CSS. Den inneholder skrifter på din egen server og tilbyr også konverteringsverktøy for skriftformater.
  • Typekit Font for WordPress - Bruk skrifter fra Adobes Typekit service (som du trenger å registrere deg for). Den lar deg legge inn innebygde koder og tilpasset CSS direkte i pluginen.
  • TK Google-skrifter - En alternativ løsning for å legge inn Google-skrifter som stort sett flytter Google Font-opplevelsen til WordPress-backend. Prøv ut skrifter med forhåndsvisning og tilpasset tekst, og endre dem i WordPress Customizer.

Hvorfor bruke tilpassede skrifter på ditt WordPress-nettsted?

Typografi er en vitenskap i seg selv, og vi vil ikke kunne gi deg et fullstendig kurs om bruk av skrifter i webdesign her. Tross alt handler det ikke bare om skriften, men også størrelsen, skråstykke, tykkelse og mange andre ting. Imidlertid, vi kan dekk hvorfor det er lurt å bruke tilpassede skrifter på WordPress-nettstedet ditt.

1. Typografi er en del av det første inntrykket

For det første påvirker skriften du bruker mye av hvordan nettstedet ditt oppfattes. Er nettstedet ditt morsomt og lekent? Er du en profesjonell bedrift? Besøkende bestemmer dette innen ett øyeblikk, og typografien din spiller en stor rolle i deres oppfatning.

2. Skrifttyper har mye mer innflytelse enn du tror

Det kan påvirke din evne til å lære, huske tekster og til og med påvirke humøret.

For eksempel i ett forskning, ble det lagt merke til at hvis du vil øke tidsbruken til å lese litt tekst, bør du bruke en serif-font. Hvis du ønsker å lese mer på kort tid, bør du bytte til en sans-serif-font.

En annen studie viste folk de samme treningsinstruksjonene i forskjellige skrifttyper. De ba deltakerne om å estimere hvor lang tid det ville ta dem å fullføre nevnte instruksjoner. Fascinerende gjettet de med den mer komplekse skriften at det ville ta dem lengre tid enn gruppen med den enklere skriften. Som en konsekvens hadde de mindre sannsynlighet for å følge treningsrutinen.

Hvor finner du egendefinerte skrifter

1. Bruk Google-skrifter for å finne egendefinert typografi

Den første tjenesten vi vil se på er Google-skrifter. Som navnet antyder, er det en tjeneste fra Google som tilbyr 800+ forskjellige skrifter. Gratis å bruke. For alle.

Slik bruker du det:

2. Finn riktig skrift

Når du først går til Google Fonts-siden (bare skriv det inn i Google Søk), er det dette du vil se:

hvordan du legger til egendefinerte skrifter på hjemmesiden til wordpress for Google Font

Brukergrensesnittet er laget for å hjelpe deg med å finne riktig skrifttype til ditt formål. Hvis du allerede har en font i tankene, kan du ganske enkelt skrive navnet inn i søkefeltet på høyre side.

Hvis ikke, kan du filtrere skriftene på mange forskjellige måter, for eksempel etter kategori:

  • Serif - Betydning av skrifter med krøllete linjer på slutten, som Times New Roman.
  • Sans serif - Enkle skrifter uten krøll, som Helvetica. Fontene som brukes på dette nettstedet er et eksempel på det.
  • Vise - Skrifttyper som kan brukes i større størrelser som overskrifter.
  • Håndskrift - Vil du at typografien din skal se ut som den ble skrevet for hånd? Da er dette din innstilling.
  • monospace - Typografi der alle karakterer har samme plass, som dette.

Andre filtre inkluderer:

  • Sortering - Sorter skrifter etter trending, populær, dato lagt til eller alfabetisk.
  • språk -Begrens skriftvalget ditt til språk som ikke er skrevet i det latinske alfabetet, for eksempel arabisk, thai eller vietnamesisk.
  • En rekke stiler -Velg hvor mange tilgjengelige stiler du trenger, noe som betyr om en font er tilgjengelig i forskjellige tykkelser, kursiv, fet og mer.
  • Tykkelse - Velg ønsket tykkelse på skriften.
  • Slant - Samme som tykkelse, men for skråstillingen. Det spenner fra rett til nesten horisontalt.
  • Bredde - Filtrer skrifter etter bredden på bokstavene og avstandene.

Når du bruker noen filtre, justeres søkeresultatene i sanntid. På venstre side vil du se tilgjengelige skrifter i kategorien og eksempler setninger.

Når du holder musepekeren over en font, kan du bruke rullegardinmenyene øverst for å la Google Fonts vise et eksempelparagraf, hele alfabetet eller tallene. Du kan også ganske enkelt klikke på setningsfeltet og skrive hva du vil.

redigere eksempeltekst i google-skrifter

I tillegg til det, er det alternativer for å endre skriftstil og størrelse. Når du gjør endringer, får du også muligheten til å bruke dem på alle søkeresultatene. Til slutt, se på fontdetaljer-siden ved å klikke Se prøve.

fontdetaljer-side i google-skrifter

3. Legg til skrifter i samlingen din

Hvis du liker en bestemt font, kan du bruke det røde plustegnet øverst til høyre for å legge den til i samlingen din. Hvis du gjør det, åpnes en meny nederst der du ser alle valgte skrifter.

fonter valgt i google-skrifter

Merk at du kan legge til mer enn en skriftfamilie. Dette er fornuftig, for eksempel når du velger en til kroppskopien din og en annen til overskrifter.

4. Tilpass skriftinnstillinger

Når du er fornøyd med samlingen din, klikker du på bunnmenyen. Hvis du gjør det, åpnes denne skjermen:

fontinnstillinger i google-skrifter

Som du kan se, kan du finne noen koder som du kan legge inn og bruke skrifter på nettstedet ditt. Dette vil bli viktig senere. For nå, klikk på fanen som sier Tilpass. Dette fører deg til denne menyen:

tilpasse skrifter i google-skrifter

Her kan du velge stilene til de aktuelle skriftene. Dette er viktig hvis du vil bruke skrifter i forskjellige størrelser, noe som ofte er tilfelle.

Vær imidlertid forsiktig: jo flere stiler nettstedet ditt må laste, jo mer vil det bremse (Google Fonts gir deg til og med en indikasjon på lastehastigheten for din nåværende samling øverst til høyre). Så tenk på hva du virkelig trenger, og velg bare det. Forresten, det er flere måter du kan få fart på WordPress.

Hvis du trenger noe annet språk enn det vanlige latinske alfabetet, må du huske å velge det nederst også.

Velg skriftspråk i google-skrifter

Utenom det, er alt du trenger å vite de to pilikonene øverst.

last ned og del knappen i google fonter

Den til venstre lar deg forhåndsvise og dele skriftsamlingen. Når du velger å gjøre det, åpnes det en utvidet side der du kan sette inn eksempeltekst og se den i alle skrifter samtidig. Denne siden er også god å dele med folk.

Mer viktig er nedlastingsknappen ved siden av. Ved å klikke på den kan du laste ned fontfilene for å bruke dem på din stasjonære maskin (for eksempel i Photoshop). Bruk Skyfonts for å holde dem oppdatert.

Senere vil vi også vise deg en måte å laste opp disse filene til serveren din og vert fonter direkte på nettstedet ditt. Husk dette for fremtiden. Foreløpig vil vi vise deg et andre, lignende skriftbibliotek.

Ekstra kilde for tilpassede skrifter

  • 15+ websikre fonter vi anbefaler

Med ovenstående skal du kunne finne noe for deg selv. Et siste tips - hvis du ikke vet hvordan du skal kombinere skrifter ordentlig, bruk Fontpar der designere har gjort leggarbeidet for deg.

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