Sådan tilføjer du nemt brugerdefinerede skrifttyper til dit WordPress-websted

At vælge den rigtige skrifttype til din hjemmeside kan være en lang og udfordrende opgave. Der er mange ting at overveje – hvilken type skrifttypestil passer til dit brands essens, hvor mange forskellige skrifttyper du skal vælge, om du skal spille sikkert eller gå efter noget mere unikt og udfordrende, og listen fortsætter. Alligevel er slutresultatet normalt alt besværet værd, da gode skrifttyper kan have en betydelig indflydelse på brugeroplevelsen og dermed på din websides overordnede succes.

Nu er det vigtigt at bemærke, at vi taler om brugerdefinerede skrifttyper udelukkende fra WordPress-perspektivet. Det betyder, at vi ikke bruger udtrykket “brugerdefineret skrifttype” i dens mere generelle betydning, som refererer til skrifttyper, der er designet specifikt til én klient. I stedet henviser vi til alle skrifttyper, der ikke er inkluderet i WordPress ud af kassen.

I dag er brugerdefinerede skrifttyper blevet en evigt tilstedeværende kraft af mange WordPress-websteder. Af denne grund, der er mange WordPress-temaer, der er pakket med brugerdefinerede skrifttyper. Men at have for mange brugerdefinerede skrifttyper aktive på dit websted kan have en negativ indvirkning på dit websteds hastighed. Heldigvis er der en måde at undgå dette på. Vi har besluttet at vise, hvordan du kan tilføje brugerdefinerede webskrifttyper til dit WordPress-websted uden at bremse det. Du kan læse mere om det nedenfor, eller du kan se videoen i stedet for.

Find tilpassede skrifttyper

Som vi allerede har nævnt, kan det være svært at vælge hvilke skrifttyper, der skal bruges til dit websted. Hvis du ikke er sikker på, hvordan du skal gribe det an, der er både gratis og licenserede skrifttyper på nettet – synes godt om Font egern, for eksempel. Dette er en hjemmeside, hvor du kan finde gratis skrifttyper af høj kvalitet fra hele nettet, og du kan bruge dem både til personlige og kommercielle formål.

Bortset fra Font Squirrel, Google skrifttyper, Envato, fonts.com, og Fontspace er blot nogle af de mange andre steder, der vil hjælpe dig med at finde lige det, du leder efter.

Under oprettelsen af ​​hjemmesiden, folk vælger og kombinerer normalt to forskellige skrifttyper – den ene til overskrifter, den anden til brødtekst. Det anbefales ikke at vælge mere end to skrifttyper, medmindre du er en erfaren designer, da det kan få din side til at se rodet ud og sænke din sideindlæsningstid. Hvis du ikke er sikker på, hvilke skrifttyper du skal bruge sammen, FontPair kan hjælpe dig med at træffe en beslutning og finde den perfekte kombination til dig. Der kan du gennemse forskellige forslag til skrifttypepar, og du kan med det samme se navnene på de pågældende skrifttyper, samt hvordan de to vil se ud, når de er arrangeret sammen. Det har du også muligheden for at downloade skrifttypeparret på stedet. Siden lader dig søge efter skrifttypepar efter bestemte kriterier, såsom udvalgte par, Serif/Sans Serif, Display/Sans Serif og så videre.

Fontjoy er et andet websted, der kan hjælpe dig med dit valg af skrifttypepar. Der er en Generer-knap, du kan klikke på for at generere skrifttyper, og du kan bestemme, hvor tæt de er relaterede. Hvis du allerede har valgt én skrifttype, kan du også generere en anden og se, hvordan den matcher med det, du har valgt. Det eneste du skal gøre er klik på låseikonet ud for den ønskede skrifttype så skrifttypegeneratoren ved hvilken der skal bevares og hvilken der skal genereres.

Brug af brugerdefinerede skrifttyper med interaktive Qode-temaer

Hvis du bruger (eller planlægger at bruge) et af Qode Interactives premium WordPress-temaer, så skal du vide, at de kommer med allerede integrerede Google Fonts. Så hvis du vil bruge en hvilken som helst Google-skrifttype fra Googles enorme skrifttypebibliotek, behøver du ikke bekymre dig.

I vores temaer kan du finde skrifttypeindstillingerne, hvis du tilgår mulighederne for det pågældende tema og derefter klikker videre Skrifttyper.

Hvis du vil tilføje en anden specifik skrifttype til dit tema, kan du gøre det ved at bruge en af ​​metoderne beskrevet i afsnittet “Tilføjelse af brugerdefinerede WordPress-skrifttyper uden et plugin” i denne artikel. På den anden side, hvis du ikke bruger vores temaer, men stadig gerne vil have en Google Font, kan du finde ud af, hvordan du gør det nedenfor.

Sådan tilføjer du brugerdefinerede skrifttyper til dit WordPress-websted ved at bruge et plugin

Det er nemt at tilføje en brugerdefineret skrifttype til WordPress med et plugin. Vi viser dig, hvordan du gør det med to forskellige plugins.

1. Google Fonts Typografi

Dette plugin kommer med allerede integrerede Google-skrifttyper, så du behøver ikke at installere nogen – du skal bare vælge dem, du ønsker at bruge.

Når du har installeret Google Fonts Typografi plugin, kan du få adgang til dens muligheder ved at gå til Udseende > Tilpas > Google-skrifttyper.

Der er to forskellige grupper af indstillinger som du kan bruge – Grundlæggende og avancerede indstillinger.

I Grundlæggende indstillinger, har du tre forskellige muligheder tilgængelige: Basistypografi, Overskriftstypografi og Knapper og inputtypografi. Det Basis typografi mulighed giver dig mulighed for at vælge og konfigurere skrifttypen for din brødtekst (den tekst, der vises mest på dit websted). Det Overskrifter Typografi mulighed er at vælge skrifttypen til alle dine overskrifter, mens Knapper og input typografi lader dig vælge en skrifttype til dine inputfelter og knapper.

For mere grundige muligheder er der også Avancerede indstillinger. Når du er der, vil du være i stand til at vælge en separat skrifttype for hver overskrift (såsom skrifttyper til webstedets titel og beskrivelse, indlægs- og sidetitel og underoverskrifter, sidebjælke og sidefod).

Der er også en Pro version af plugin’et, som kommer med et par andre muligheder, såsom muligheden for at tilpasse skriftstørrelse, farve og linjehøjde, muligheden for at optimere dit websteds ydeevne ved kun at indlæse de skrifttypevægte, du planlægger at bruge, samt tilføje de tilpassede elementer, du ønsker, så at pluginnet kan justere indstillingerne i overensstemmelse hermed og gøre dem mere personlige til dine behov.

2. Nem Google Fonts

Når du har installeret Nem Google Fonts plugin, gå over til Udseende > Tilpas > Typografi > Standardtypografi.

Dette plugin giver dig kun mulighed for at ændre skrifttyper til afsnit og overskrifter, men ikke for din sidefod, sidebjælke og andre webstedssektioner. Du kommer dog til at konfigurere nogle ekstra funktioner såsom skrifttypevægt/stil, tekstdekoration, teksttransformation, skriftstørrelse og så videre.

Selvom du kun kan ændre skrifttyper til dine afsnit og overskrifter, kan du stadig indsætte brugerdefinerede dele af tekst som du vil ændre skrifttypen for. Sig, at du for eksempel ønsker at ændre typografien for blokcitater og links. For at gøre dette skal du blot indsætte brugerdefinerede felter for disse kategorier. Vi viser dig hvordan.

Gå til Indstillinger > Google-skrifttyper.

Hvis du vil have den samme skrifttype til både blockquotes og links, så skal du skal oprette en skrifttypekontrol. Du kan gøre dette ved at indtaste et navn i Kontrolnavn feltet og derefter klikke på Opret skrifttypekontrol knap.

Så burde du sæt HTML-tags for både links og blokanførselstegn i samme skrifttypekontrol (taggene er blokanførselstegn og a). Når du er færdig, klik på Gem skrifttypekontrol.

Når du har oprettet denne nye skrifttypekontrol, får du yderligere indstillinger. Når du går til Udseende > Tilpas > Typografi, vil du se en anden fane kaldet Tema typografi. Her finder du alle indstillinger for de tags, du har valgt.

De indstillinger, du får, vil være de samme som dem for standard skrifttypekontroller.

Tilføjelse af brugerdefinerede WordPress-skrifttyper uden et plugin

Der er måder at tilføje brugerdefinerede WordPress-skrifttyper manuelt, og det er virkelig nemt at gøre det. Du har brug for noget grundlæggende CSS viden for at gøre det, men du kan ikke gå galt, hvis du følger disse trin. Nedenfor viser vi dig to forskellige metoder til at tilføje brugerdefinerede WordPress-skrifttyper uden at bruge et plugin.

Metode 1

Gå først til Google Fonts og find den skrifttype, der passer bedst til det, du har i tankerne. Når du vælger den ønskede skrifttype, får du alle de nødvendige oplysninger til at indlejre den på din webside.

Derefter, sørg for at tilføje koden i din header.php-fil. Gå til Udseende > Temaeditor, find header.php-filen og tilføj koden lige under tagget. Koden for den Indie Flower-skrifttype, vi valgte, er som følger:

<link href="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap" rel="stylesheet">

Nu skal du find filen style.css. For at få adgang til det, gå til Udseende > Temaeditor i dit Dashboard og vælg style.css. Der vil du definere de elementer, du ønsker at anvende skrifttypen på. Nemlig, hvis du vil have en specifik skrifttype til H1 overskrift, så er dette hvad du vil indsætte i style.css filen:

h1 {
font-family: ‘your font name goes here’, cursive;
}

Du kan tilføje din skrifttype til enhver sektion af dit websted på samme måde. Du skal bare kende CSS-vælgeren for det element, du gerne vil ændre skrifttypen til.

Alternativt er der et andet sted, hvor du kan definere, hvor skrifttypen skal vises. Klik på Tilpas > Yderligere CSS. Herfra kan du overvåge alle ændringer på stedet.

Metode 2

Den mest ligetil metode til at tilføje brugerdefinerede skrifttyper til WordPress er ved at bruge CSS3 @font-face, som giver dig mulighed for at bruge enhver skrifttype, du ønsker på din webside. Først og fremmest skal du downloade den skrifttype, du vil bruge, i webfilformat. Hvis du ikke har formatet, så kan du blot konvertere det med FontSquirrel Webfont Generator.

Derefter skal du uploade dine skrifttypefiler til din hostingserver. Du kan enten upload filerne i dit underetemas mappe eller i en ny mappe i selve temaet. For at uploade skrifttypen kan du bruge FTP eller cPanels filhåndtering.

Når du har uploadet skrifttypen, skal du indlæse den i dit temas CSS-typografiark. For at gøre dette skal du bruge CSS3 @font-face-reglen:

@font-face {
font-family: Arvo; 
src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf); 
font-weight: normal; 
}

Du skal angive skrifttypens navn, dens placering på din server og dens skrifttypevægt. Derfra kan du bruge den skrifttype hvor som helst på dit websted gennem en simpel CSS:

h1 { 
font-family: "Arvo", Arial, sans-serif;
}

Konklusion

Og det er sådan, du tilføjer tilpassede WordPress-skrifttyper til dit websted. Som du kan se, er der mange forskellige metoder, du kan bruge, og ingen af ​​dem er alt for komplicerede. Så gå videre, vælg en skrifttype (eller skrifttypepar), der falder i din smag, føj den til dit WordPress-websted, og begynd at tilpasse for at gøre din typografi smuk, ren og bemærkelsesværdig.