I denne WordPress-hjelpeartikkelen tar jeg deg steg-for-steg gjennom prosessen med å legge til egendefinerte fonter til WordPress Block Themes. Dette betyr at du kan legge til ALLE fonter til ethvert tema, for eksempel å legge til Google Fonts til Twenty Twenty Three-temaet.
Jeg viser deg hvordan du utfører denne oppgaven ved hjelp av Create Block Theme-plugin utviklet direkte av WordPress-teamet med utviklere. Dette gjør plugin-modulen ultralett, høy ytelse og veldig enkel å bruke med blokktemaer.
Med denne metoden kan du enten lenke til fonter (dvs. lenke til Google Fonts) eller bygge inn fonter lokalt på nettstedet ditt (for bedre nettstedytelse). La oss komme inn i det!
Video: Legg til tilpassede skrifter til WordPress
1. Installer "Create Block Theme"-plugin
For det første vil du logge på WordPress-administrasjonsområdet ditt, som tar deg til dashbordet. Derfra går du til Plugins> Legg til ny fra hovednavigasjonen (rød pil i bildet ovenfor).
Søk etter "Create Block Theme" plugin ved å bruke søkefeltet i øvre høyre hjørne (skissert i grønt på bildet ovenfor). Når Create Block Theme-pluginen vises, klikker du på "Installer nå"-knappen for å installere den på nettstedet ditt (rød pil).
Deretter klikker du på "Aktiver"-knappen for å aktivere plugin-en.
2. Deaktiver sikkerhetsplugin (midlertidig)
For at resten av denne prosessen skal gå problemfritt, må du midlertidig deaktivere eventuelle sikkerhetsplugins du har installert som blokkerer brukernes mulighet til å redigere temaer eller plugins.
I mitt spesielle tilfelle bruker jeg SG Security-plugin (som følger med alle WordPress-nettsteder vert via Siteground – en vert jeg anbefaler på det sterkeste). Jeg vet med sikkerhet at denne pluginen forstyrrer prosessen med å legge til egendefinerte fonter, så jeg vil deaktivere innstillingen som kommer i veien.
I dette tilfellet vil jeg navigere til "Site Security"-delen av SG Security-plugin-modulen ved å bruke hovednavigasjonen (rød pil i bildet ovenfor).
Deretter ruller jeg ned til alternativet merket "Deaktiver temaer og plugin-redigering" (uthevet i grønt i bildet ovenfor). Du vil se en bryter til høyre for dette alternativet – klikk på bryteren for å deaktivere denne funksjonen (rød pil). Du skal se en "Suksess"-melding som dukker opp i den blå pilen i høyre hjørne).
Med sikkerhetspluginen vår midlertidig deaktivert, kan vi gå videre til neste trinn med å velge og laste opp skriftene vi ønsker å bruke på nettstedet vårt.
Det er to alternativer for å bruke tilpassede fonter i WordPress.
3. Velg egendefinerte skrifter for WordPress (koblede Google-fonter)
Det første alternativet er å koble til fonter på en tredjepartsside, Google Fonts. Dette alternativet er enklere og tar kortere tid å sette opp, men senker nettstedets sideinnlastingshastighet. Det begrenser deg også til skriftene som er tilgjengelige fra Google Fonts (selv om Google tilbyr tonnevis av flotte, gratis skrifter). Hvis du er mindre teknisk kunnskapsrik og ikke har noe imot å bruke Google Fonts, anbefaler jeg dette alternativet.
For det første, naviger til "Utseende> Administrer temafonter" fra hovednavigasjonen (rød pil i bildet ovenfor).
I arbeidsområdet "Administrer temafonter" vil du se alle standardfontene som er installert i WordPress (uthevet i grønt i bildet ovenfor). Skriftene dine er også oppført langs høyre side av arbeidsområdet, sammen med de forskjellige variasjonene av hver skrift og filstørrelse for hver skriftvariant (angitt i blått).
For å legge til en ny skrift i temaet ditt, klikk på "Legg til Google Font"-knappen (rød pil).
Klikk på rullegardinmenyen "Velg skrift" og søk etter Google-fonten du vil legge til på nettstedet ditt (skriftene er i alfabetisk rekkefølge). Hvis du ikke er sikker på hvordan hver font ser ut, anbefaler jeg surfer på Google Fonts-nettstedet å utforske fonter og teste dem ut. Når du har funnet skriften du vil bruke, velger du den fra rullegardinmenyen (blå pil).
Du vil nå se en liste over alle tilgjengelige varianter du kan installere på temaet ditt for den skriften. Du kan enten merke av i boksen ved siden av individuelle varianter, eller klikke på den øverste avmerkingsboksen (rød pil i bildet ovenfor) for å velge alle varianter. Du vil se en liste over de valgte variantene, sammen med filstørrelsen, på høyre side av skjermen. Når du er klar, klikker du på "Legg til Google-fonter til temaet ditt" (grønn pil).
Du skal nå se en melding øverst i arbeidsområdet om at fonten er installert i ditt tema (i dette tilfellet til Twenty-Twenty Three-temaet). Du kan deretter klikke på koblingen "Administrer skrifter" i suksessmeldingsboksen, eller klikk på den lille tilbakepilen (rød pil i bildet ovenfor) for å gå tilbake til arbeidsområdet "Administrer temafonter".
Du vil nå se den nylig installerte skriftfamilien din oppført med resten av temaets fonter (rød pil i bildet ovenfor). Du vil også se skriftfamilien din og alle tilhørende skriftvarianter på høyre side av arbeidsområdet (uthevet i grønt).
4. Bygg inn tilpassede skrifter for WordPress (lokale skrifter for bedre SEO)
Det andre alternativet for å legge til fonter på WordPress-nettstedet ditt er å "bygge inn" eller "lokale vert" skriftene dine. Med andre ord vil skriftfilene dine være plassert inne på den samme webserveren som er vert for nettstedet ditt.
Fordelen med denne metoden er at den ikke krever henting av skrifter fra et tredjeparts domene. Som et resultat lastes skriftene dine raskere og dermed lastes nettsiden raskere. Raskere innlasting av nettsider er bedre for brukeropplevelsen, noe som betyr at det kan hjelpe nettstedet ditt til å rangere høyere på søkemotorer og få mer trafikk.
Med andre ord er innebygde fonter bedre for SEO (søkemotoroptimalisering).
Selv om denne metoden tar et par ekstra trinn, er den fortsatt ganske enkel og bruker samme plugin som vi installerte tidligere (Create Block Themes plugin).
For å installere skriftene dine lokalt, start med å navigere til Utseende> Administrer temafonter fra hovednavigasjonen (hvis du ikke allerede er der fra siste trinn – blå pil i bildet ovenfor). Deretter klikker du på "Legg til lokal skrift"-knappen i øverste høyre hjørne av arbeidsområdet (rød pil).
Du vil bli ført til området "Lokale skrifter" hvor du kan velge en fil fra datamaskinen din for å laste opp til temaet ditt. Under "Velg fil"-knappen vil du se en liste over de støttede fontfilformatene. Du kan få disse formatene fra alle pålitelige fontnettsteder, inkludert Google Fonts.
Finn og last ned valgfri skrifttype fra Google Fonts
Jeg hopper over til Google Fonts og bruker søkefeltet (rød pil) for å søke etter skriften jeg vil ha - i dette tilfellet "Catamaran"-fonten. Når skriften er oppført i resultatene, klikker jeg på den for å se skriftsiden (grønn pil).
Deretter klikker jeg på "Last ned familie"-knappen for å laste ned denne fonten og alle variantene til datamaskinen min. Du kan bla nedover på fontsiden hvis du vil se alle tilgjengelige varianter for denne fonten.
Klikk "Lagre" for å lagre zip-filen til fonten på datamaskinen din.
Pakk ut fontmappen for å få tilgang til skriftfiler
Når nedlastingen er fullført, klikker du på pilen ved siden av den ferdige nedlastingen (rød pil) og klikker på "Vis i mappe" (grønn pil).
Høyreklikk på zip-filen i filutforskeren og klikk "Pakk ut alle."
Et popup-vindu vil vise deg hvor skriftene blir trukket ut (rød pil). Du kan endre denne plasseringen hvis du vil, ellers klikker du på knappen merket "Extract" (grønn pil). Dette vil pakke ut mappen og opprette en ny fil på datamaskinen din med alle de utpakkede fontfilene. Denne mappen skal åpnes automatisk.
Hvis du lastet ned skriftfiler ved hjelp av Google Fonts, skriv inn mappen merket "statisk" for å se alle skriftfilene dine. Ellers kan du bare se etter filer som er OTF-, TTF-, WOFF- eller WOFF2-filer.
Inne i denne "statiske" mappen vil du se en liste over alle skriftvariantene vi lastet ned for Catamaran-fonten fra Google Fonts. Det er totalt 9 varianter, og vi kan enten laste opp alle til nettstedet vårt eller bare de variantene vi ønsker/trenger. Klikk på mappeplasseringen i filutforskeren (grønn pil), høyreklikk og velg "Kopier".
Last opp dine egendefinerte skrifter til WordPress
Naviger tilbake til WordPress hvor du har "Lokale fonter"-arbeidsområdet åpent. Klikk på "Velg fil"-knappen (rød pil i bildet ovenfor) for å velge fontene dine. Du kan manuelt navigere til stedet på datamaskinen der skriftene dine er lagret. Eller klikk ganske enkelt på adresselinjen til filutforskeren (blå pil), slett adressen som er der, høyreklikk og velg "Lim inn" (grønn pil). Dette vil lime inn adressen du kopierte i forrige trinn. Trykk på Enter-tasten og du blir ført til mappen med skriftene dine.
Du må laste opp skriftvariantene én om gangen. For dette eksemplet laster jeg ganske enkelt opp skriftvarianten "Catamaran-Regular" ved å klikke på den (grønn pil), og deretter klikke på "Åpne"-knappen (rød pil).
Du bør nå se informasjon for "FONT NAME", "FONT STYLE" og "FONT WEIGHT", samt en forhåndsvisning av skriften på høyre side. Klikk "Last opp skrift til temaet ditt" (rød pil) for å laste opp skriftvarianten.
Se dine egendefinerte temafonter
Du skal nå se en suksessmelding øverst i arbeidsområdet (skissert i grønt i bildet ovenfor). Gratulerer – din egendefinerte skrift er nå lastet opp til temaet ditt som en lokal font! Du kan fortsette å klikke på "Velg fil" og laste opp så mange skriftvarianter du vil.
Når du er ferdig, klikker du på koblingen "Administrer skrifter" i suksessmeldingsboksen eller tilbakepilen (angitt med den røde pilen) for å gå tilbake til arbeidsområdet Administrer temafonter.
Du vil nå se den nye "Catamaran"-skriftfamilien oppført med resten av temaets skriftfamilier (rød pil). I tillegg vil du se skriftfamilien og eventuelle variasjoner du installerte på høyre side av Administrer temafonter-vinduet (uthevet i grønt).
5. Endre temaets skrifter til dine egendefinerte skrifter
Nå som du har de nye fontene installert, er det tid for den morsomme delen!
For å endre temaets fonter til dine egendefinerte fonter, naviger til Site Editor ved å gå til Utseende>Editor (rød pil i bildet ovenfor).
Klikk hvor som helst innenfor hovedinnholdsområdet (rød pil) i Site Editor for å få frem kontrollene.
I toppmenyen klikker du på "Stiler"-ikonet (blå pil). Klikk deretter på "Typografi" (rød pil).
Under "Elementer" kan du endre skrifttypen for teksten, lenkene, overskriftene eller knappene. Jeg velger alternativet "Overskrifter" for dette eksemplet.
Du vil nå se en rullegardin under "Typografi" der du kan velge fra hvilken som helst av temafontene dine (rød pil). Du kan se "Neuton" og "Catamaran" fontene jeg la til for denne opplæringen er oppført her. Jeg velger "Neuton" som overskriftsfont.
Klikk på "Lagre"-knappen øverst til høyre for å lagre endringene.
Klikk "Lagre" en gang til (rød pil), og din egendefinerte font vil nå bli lagret for alle overskriftene på nettstedet ditt!
Deretter kan du klikke på Vis>Vis nettsted-koblingen øverst til høyre i nettstedsredigereren (røde piler i bildet ovenfor) for å se hvordan nettstedet ditt ser ut med den nye fonten. Gå tilbake til Site Editor og gjenta denne prosessen for alle andre elementer du ønsker å tilpasse fonten til.
For å gå tilbake til WordPress Admin Area, klikk på logoen i øverste venstre hjørne av nettstedsredigereren (grønn pil), og klikk deretter på logoen igjen.
6. Slik sletter du tilpassede skrifter fra WordPress
For å slette noen av de egendefinerte skriftene dine, start med å navigere tilbake til Utseende> Administrer temafonter.
Du kan slette hele skriftfamilien ved å holde musen over høyre side av fontfamilienavnet og klikke på søppelbøtteikonet som vises (blå pil). Eller hold musepekeren over individuelle skriftvarianter og klikk på søppelikonet (skriftvarianter er plassert innenfor det grønne markerte området). Du kan også klikke på koblingen "Fjern skriftfamilie" for å slette en hvilken som helst skriftfamilie (lilla pil).
Det er det for denne opplæringen! Hvis du likte det, kan du sjekke ut min andre WordPress hjelpeartikler eller meld deg på min WordPress Masterclass på Udemy.
