I denne WordPress-hjælpeartikel tager jeg dig trin-for-trin gennem processen med at tilføje brugerdefinerede skrifttyper til dine WordPress-bloktemaer. Dette betyder, at du kan tilføje ENHVER skrifttyper til ethvert tema, såsom at tilføje Google Fonts til Twenty Twenty Three-temaet.
Jeg viser dig, hvordan du udfører denne opgave ved hjælp af Create Block Theme-pluginet, der er udviklet direkte af WordPress-teamet af udviklere. Dette gør plugin'et ultra let, høj ydeevne og meget let at bruge med bloktemaer.
Med denne metode kan du enten linke til skrifttyper (dvs. linke til Google Fonts) eller indlejre skrifttyper lokalt på dit websted (for bedre webstedsydelse). Lad os komme ind i det!
Video: Tilføj brugerdefinerede skrifttyper til WordPress
1. Installer "Create Block Theme" plugin
Til at begynde med vil du gerne logge ind på dit WordPress-administrationsområde, som fører dig til Dashboard. Derfra skal du gå til Plugins>Tilføj nyt fra hovednavigationen (rød pil i ovenstående billede).
Søg efter "Create Block Theme" plugin'et ved hjælp af søgelinjen i øverste højre hjørne (angivet med grønt på billedet ovenfor). Når plugin'et Create Block Theme vises, skal du klikke på knappen "Install Now" for at installere det på dit websted (rød pil).
Klik derefter på knappen "Aktiver" for at aktivere plugin'et.
2. Deaktiver sikkerhedsplugin (midlertidigt)
For at resten af denne proces kan køre problemfrit, skal du midlertidigt deaktivere eventuelle sikkerhedsplugins, du har installeret, som blokerer brugernes mulighed for at redigere temaer eller plugins.
I mit særlige tilfælde bruger jeg SG Security plugin (som følger med alle WordPress-websteder hostet via Siteground – en vært jeg varmt kan anbefale). Jeg ved med sikkerhed, at dette plugin forstyrrer processen med at tilføje brugerdefinerede skrifttyper, så jeg vil deaktivere den indstilling, der kommer i vejen.
I dette tilfælde vil jeg navigere til afsnittet "Site Security" i SG Security-plugin'et ved hjælp af hovednavigationen (rød pil i billedet ovenfor).
Dernæst ruller jeg ned til indstillingen mærket "Deaktiver Temaer & Plugins Editor" (fremhævet med grønt i ovenstående billede). Du vil se en til/fra-knap til højre for denne indstilling – klik på knappen for at deaktivere denne funktion (rød pil). Du bør se en "Succes"-meddelelse pop op i højre hjørne blå pil).
Med vores sikkerhedsplugin midlertidigt deaktiveret, kan vi gå videre til næste trin med at vælge og uploade de skrifttyper, vi ønsker at bruge på vores websted.
Der er to muligheder for at bruge brugerdefinerede skrifttyper i WordPress.
3. Vælg brugerdefinerede skrifttyper til WordPress (linkede Google-skrifttyper)
Den første mulighed er at linke til skrifttyper på et tredjepartswebsted, Google Fonts. Denne mulighed er enklere og tager kortere tid at konfigurere, men sænker din hjemmesides sideindlæsningshastighed. Det begrænser dig også til de skrifttyper, der er tilgængelige fra Google Fonts (selvom Google tilbyder tonsvis af fantastiske, gratis skrifttyper). Hvis du er mindre teknisk kyndig og ikke har noget imod at bruge Google Fonts, anbefaler jeg denne mulighed.
For det første skal du navigere til "Udseende> Administrer temaskrifttyper" fra hovednavigationen (rød pil i ovenstående billede).
I arbejdsområdet "Administrer temaskrifttyper" vil du se alle de standardskrifttyper, der i øjeblikket er installeret i WordPress (fremhævet med grønt i ovenstående billede). Dine skrifttyper er også opført langs højre side af arbejdsområdet sammen med de forskellige variationer af hver skrifttype og filstørrelse for hver skrifttypevariation (angivet i blåt).
For at tilføje en ny skrifttype til dit tema skal du klikke på knappen "Tilføj Google Font" (rød pil).
Klik på rullemenuen "Vælg skrifttype", og søg efter den Google-skrifttype, du vil føje til dit websted (skrifttyperne er i alfabetisk rækkefølge). Hvis du ikke er sikker på, hvordan hver skrifttype ser ud, anbefaler jeg gennemse webstedet Google Fonts at udforske skrifttyper og teste dem. Når du har fundet den skrifttype, du vil bruge, skal du vælge den fra rullemenuen (blå pil).
Du vil nu se en liste over alle de tilgængelige varianter, du kan installere på dit tema for den skrifttype. Du kan enten markere afkrydsningsfeltet ud for individuelle varianter eller klikke på det øverste afkrydsningsfelt (rød pil på billedet ovenfor) for at vælge alle varianter. Du vil se en liste over dine valgte varianter sammen med deres filstørrelse i højre side af skærmen. Når du er klar, skal du klikke på "Tilføj Google-skrifttyper til dit tema" (grøn pil).
Du skulle nu se en besked øverst i arbejdsområdet om, at skrifttypen er blevet installeret til dit tema (i dette tilfælde til Twenty-Twenty Three-temaet). Du kan derefter klikke på linket "Administrer skrifttyper" inde i succesmeddelelsesboksen eller klikke på den lille tilbagepil (rød pil på billedet ovenfor) for at vende tilbage til arbejdsområdet "Administrer temaskrifttyper".
Du vil nu se din nyligt installerede skrifttypefamilie opført med resten af dit temas skrifttyper (rød pil i ovenstående billede). Du vil også se din skrifttypefamilie og alle dens tilknyttede skrifttypevarianter i højre side af arbejdsområdet (fremhævet med grønt).
4. Integrer brugerdefinerede skrifttyper til WordPress (lokale skrifttyper for bedre SEO)
Den anden mulighed for at tilføje skrifttyper til dit WordPress-websted er at "indlejre" eller "lokale hoste" dine skrifttyper. Med andre ord vil dine skrifttypefiler være placeret inde i den samme webserver, som hoster dit websted.
Fordelen ved denne metode er, at den ikke kræver hentning af skrifttyper fra et tredjepartsdomæne. Som et resultat indlæses dine skrifttyper hurtigere, og dermed indlæses din webside hurtigere. Hurtigere indlæsning af websider er bedre for brugeroplevelsen, hvilket betyder, at det kan hjælpe dit websted med at rangere højere på søgemaskinerne og få mere trafik.
Med andre ord er indlejrede skrifttyper bedre til SEO (søgemaskineoptimering).
Selvom denne metode tager et par ekstra trin, er den stadig ret let og bruger det samme plugin, som vi installerede tidligere (Create Block Themes plugin).
For at installere dine skrifttyper lokalt, start med at navigere til Udseende>Administrer temaskrifttyper fra hovednavigationen (hvis du ikke allerede er der fra sidste trin – blå pil i ovenstående billede). Klik derefter på knappen "Tilføj lokal skrifttype" i øverste højre hjørne af arbejdsområdet (rød pil).
Du bliver ført til området "Lokale skrifttyper", hvor du kan vælge en fil fra din computer, der skal uploades til dit tema. Under knappen "Vælg fil" vil du se en liste over de understøttede skrifttypefilformater. Du kan få disse formater fra ethvert pålideligt skrifttypewebsted, inklusive Google Fonts.
Find og download din valgte skrifttype fra Google Fonts
Jeg hopper over til Google Fonts og bruger søgelinjen (rød pil) til at søge efter den skrifttype, jeg vil have - i dette tilfælde "Catamaran"-skrifttypen. Når skrifttypen er angivet i resultaterne, klikker jeg på den for at se skrifttypesiden (grøn pil).
Dernæst klikker jeg på knappen "Download familie" for at downloade denne skrifttype og alle dens variationer til min computer. Du kan rulle ned på skrifttypesiden, hvis du vil se alle tilgængelige varianter for denne skrifttype.
Klik på "Gem" for at gemme skrifttypens zip-fil på din computer.
Udpak din skrifttypemappe for at få adgang til skrifttypefiler
Når overførslen er færdig, skal du klikke på pilen ud for den færdige download (rød pil) og klikke på "Vis i mappe" (grøn pil).
Højreklik på zip-filen i din filstifinder, og klik på "Udtræk alle".
Et pop op-vindue vises, der viser dig, hvor skrifttyperne udpakkes (rød pil). Du kan ændre denne placering, hvis du vil, ellers klik på knappen mærket "Udtræk" (grøn pil). Dette vil udpakke mappen og oprette en ny fil på din computer med alle de udpakkede skrifttypefiler. Denne mappe skulle åbne automatisk.
Hvis du downloadede skrifttypefiler ved hjælp af Google Fonts, skal du indtaste mappen mærket "statisk" for at se alle dine skrifttypefiler. Ellers skal du blot se efter filer, der er OTF-, TTF-, WOFF- eller WOFF2-filer.
Inde i denne "statiske" mappe vil du se en liste over alle de skrifttypevarianter, vi downloadede til Catamaran-skrifttypen fra Google Fonts. Der er i alt 9 variationer, og vi kan enten uploade dem alle til vores hjemmeside eller bare de varianter, vi ønsker/har brug for. Klik på mappeplaceringen i filstifinderen (grøn pil), højreklik og vælg "Kopier".
Upload dine brugerdefinerede skrifttyper til WordPress
Naviger tilbage til WordPress, hvor du har arbejdsområdet "Lokale skrifttyper" åbent. Klik på knappen "Vælg fil" (rød pil på billedet ovenfor) for at vælge dine skrifttyper. Du kan manuelt navigere til det sted på din computer, hvor dine skrifttyper er gemt. Eller klik blot på adresselinjen i filstifinderen (blå pil), slet den adresse, der i øjeblikket er der, højreklik derefter og vælg "Indsæt" (grøn pil). Dette vil indsætte den adresse, du kopierede i det forrige trin. Tryk på enter-tasten, og du vil blive ført til mappen med dine skrifttyper.
Du skal uploade dine skrifttypevarianter én ad gangen. For dette eksempel vil jeg blot uploade "Catamaran-Regular" skrifttypevariationen ved at klikke på den (grøn pil) og derefter klikke på knappen "Åbn" (rød pil).
Du bør nu se oplysninger om "FONTNAVN", "FONT STYLE" og "FONT WEIGHT", samt en forhåndsvisning af skrifttypen i højre side. Klik på "Upload skrifttype til dit tema" (rød pil) for at uploade skrifttypevarianten.
Se dine brugerdefinerede temaskrifttyper
Du skulle nu se en succesmeddelelse øverst i arbejdsområdet (angivet med grønt på billedet ovenfor). Tillykke – din brugerdefinerede skrifttype er nu uploadet til dit tema som en lokal skrifttype! Du kan fortsætte med at klikke på "Vælg fil" og uploade så mange skrifttypevarianter, som du vil.
Når du er færdig, skal du klikke på linket "Administrer skrifttyper" i succesmeddelelsesboksen eller tilbagepilen (angivet med den røde pil) for at vende tilbage til arbejdsområdet Administrer temaskrifttyper.
Du vil nu se den nye "Catamaran"-skrifttypefamilie opført med resten af dit temas skrifttypefamilier (rød pil). Derudover vil du se skrifttypefamilien og eventuelle variationer, du har installeret, i højre side af vinduet Administrer temaskrifttyper (fremhævet med grønt).
5. Skift dit temas skrifttyper til dine brugerdefinerede skrifttyper
Nu hvor du har dine nye skrifttyper installeret, er det tid til den sjove del!
For at ændre dit temas skrifttyper til dine brugerdefinerede skrifttyper skal du navigere til webstedseditoren ved at gå til Udseende> Editor (rød pil i ovenstående billede).
Klik hvor som helst inden for hovedindholdsområdet (rød pil) i webstedseditoren for at få kontrolelementerne frem.
I topmenuen skal du klikke på "Styles"-ikonet (blå pil). Klik derefter på "Typografi" (rød pil).
Under "Elementer" kan du ændre skrifttypen for teksten, links, overskrifter eller knapper. Jeg vælger indstillingen "Overskrifter" for dette eksempel.
Du vil nu se en rullemenu under "Typografi", hvor du kan vælge fra enhver af dine temaskrifttyper (rød pil). Du kan se skrifttyperne "Neuton" og "Catamaran", jeg tilføjede til denne vejledning, er anført her. Jeg vælger "Neuton" for min overskriftsskrifttype.
Klik på knappen "Gem" i øverste højre hjørne for at gemme dine ændringer.
Klik på "Gem" endnu en gang (rød pil), og din brugerdefinerede skrifttype vil nu blive gemt for alle overskrifter på hele dit websted!
Dernæst kan du klikke på linket Vis> Vis websted i øverste højre hjørne af webstedseditoren (røde pile på billedet ovenfor) for at se, hvordan dit websted ser ud med din nye skrifttype. Vend tilbage til webstedseditoren og gentag denne proces for alle andre elementer, hvis skrifttype du vil tilpasse.
For at vende tilbage til WordPress Admin Area skal du klikke på logoet i øverste venstre hjørne af webstedseditoren (grøn pil), og derefter klikke på logoet igen.
6. Sådan sletter du brugerdefinerede skrifttyper fra WordPress
For at slette nogen af dine brugerdefinerede skrifttyper, start med at navigere tilbage til Udseende>Administrer temaskrifttyper.
Du kan slette hele skrifttypefamilien ved at holde musen over højre side af skrifttypefamilienavnet og klikke på skraldespanden, der vises (blå pil). Eller hold musen over individuelle skrifttypevarianter og klik på papirkurvsikonet (skrifttypevarianter er placeret inde i det grønne fremhævede område). Du kan også klikke på linket "Fjern skrifttypefamilie" for at slette enhver skrifttypefamilie (lilla pil).
Det er det til denne tutorial! Hvis du kunne lide det, kan du tjekke min anden WordPress Hjælpeartikler eller tilmeld dig min WordPress Masterclass på Udemy.
