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

Kunne du tænke dig at lære, hvordan du tilføjer brugerdefinerede skrifttyper til et WordPress-websted?

Hvorfor gøre din blog kedelig ved at bruge standardskrifttyper? Lad din blog tale om din livlige personlighed og de emner, du dækker med en bred vifte af brugerdefinerede skrifttyper. Brugerdefinerede skrifttyper er en cool funktion, der får din blog til at se at foretrække frem for andre.

Lad os se det i øjnene; vi elsker alle blogs og hjemmesider med de rigtige skrifttyper. De dekorerer ikke kun hjemmesiden, men hjælper også med at tiltrække brugeren til dit indhold. Valget af standard WordPress-skrifttyper er dog begrænset og afhænger af det tema, du bruger. Den gode nyhed er, at du kan tilføje dem manuelt eller med WordPress plugins specialiseret.

Og her opstår to spørgsmål: hvor kan man få tilpassede skrifttyper til WordPress og hvordan man installerer brugerdefinerede skrifttyper på din hjemmeside.

Lad os finde ud af.

Hvorfor skal jeg bruge brugerdefinerede skrifttyper?

Tiden er forbi, hvor Times New Roman og Georgia blev betragtet som de eneste skrifttyper til tekst på websteder. I løbet af de seneste par år har skrifttyperummet ændret sig fuldstændig med fremkomsten af ​​skrifttyper som f.eks Google Fonts og andre.

I dag er der hundredvis af gratis skrifttyper, informations- og træningshjælpemidler og designressourcer tilgængelige på internettet. I modsætning til Adobe Illustrator, Photoshop og andre klassiske apps giver WordPress dig ikke fuld kontrol over standardskrifttyper. Kun visse WordPress-temaer vælger at understøtte og bruge tilpassede skrifttyper.

Derfor vil du i denne artikel lære, hvordan du finder passende brugerdefinerede skrifttyper og bruger dem på din WordPress-hjemmeside.

Vigtigheden af ​​at bruge brugerdefinerede skrifttyper

Hvorfor ændre skrifttyper, ordindrykning, linjeafstand, bogstavmellemrum eller skrifttypemætning, spørger du? Det viser nogle undersøgelser dog typografi forbedrer læseforståelsen.

Meget afhænger af skrifttypernes opbygning. På et bevidst og ubevidst niveau - alle evaluerer indholdet af en webside ved design.

Skrifttypedesign påvirker læsere, selvom de ikke er opmærksomme på det. At give op på skrifttypedesign betyder at give op på selve udviklingen! Læserens humør afhænger af det. Skrifttypen gør det lettere at læse eller tvinger brugere til at forlade siden.

Alle webbrowsere inkluderer et sæt standardskrifttyper. Det betyder, at hvis skrifttypen ikke er angivet i sidens CSS, vil standardversionen blive brugt. Du kan stadig bruge standardskrifttyperne, men de gør det sværere for brugerne. Det er derfor, det er vigtigt at bruge en brugerdefineret skrifttype. Hvis dit WordPress-tema ikke giver dig muligheder for at ændre skrifttypen, er der masser af websteder og værktøjer, der kan hjælpe.

Alternativer til Google Fonts

Mange af jer kender Google skrifttyper. Der er mange flere hjemmesider, hvor du kan finde smukke skrifttyper. Nogle af dem er gratis til personlig brug. Hvis du har brug for kommerciel brug, skal du have en licens. Google Fonts og Adobe Edge Fonts er gratis. Det er derfor, de ikke er så unikke.

Her er nogle andre ressourcer til at finde skrifttyper til gratis og kommerciel brug:

1. Template Monster — På TemplateMonster-webstedet finder du alt, hvad du skal bruge til webdesign. Der er også mange skrifttyper og skrifttyper til personlig brug for en lille pris. Derudover For at hjælpe dig med at vælge, præsenteres alle skrifttyper på brochurer eller rammer. Hver skrifttype er også præsenteret med en kommerciel licens.
2. MyFonts — MyFonts tilbyder i øjeblikket det største udvalg af skrifttyper i verden. Priserne her er dog også i det øvre segment. Så hvis du har et stramt budget, er dette måske ikke noget for dig.
3. FontSpring — Fontspring sælger nyhedsskrifttyper til kommerciel brug. Men i næsten hver familie kan 1-2 gratis skrifttyper bruges til personlige formål. Der er også en separat sektion med gratis skrifttyper. Samlingen er levende. Men du skal nøje studere licensoplysningerne for en bestemt skrifttype, før du downloader.
4. Cufonfonte — Det er også en kæmpe samling af forskellige skrifttyper. Vælg en hvilken som helst, og du vil se en side med detaljerede oplysninger om den. Der er masser af gratis skrifttyper, og de er opdelt i individuelle sektioner. Sorteringssystemet på CufonFonts er ret fleksibelt og praktisk. Webfont-understøttelse er også inkluderet.
5. Dafont — Endnu en tilgængelig samling af 3 gratis skrifttyper. De fleste af dem er kun designet til personlig brug. En cool DaFont-funktion er et kategorisystem. Du kan vælge skrifttyper i stil med tegneserier, videospil, vintage osv….

Valget af skrifttyper er meget fristende, fordi de alle er smukke. Men du skal ikke vælge meget. Brug ikke mere end to skrifttyper på et websted web. Derefterudseendet af din hjemmeside vil være konsekvent. Når du har valgt dine skrifttyper, skal du sørge for at uploade filerne for hver typografi, du vil bruge (almindelig, fed, kursiv osv.).

Nu hvor du har valgt den passende skrifttype til dit websted, lad os finde ud af, hvordan du tilføjer den.

Sådan tilføjes brugerdefinerede skrifttyper til WordPress

Der er flere måder at tilføje skrifttyper til et WordPress-websted:

1. plugins : i dette tilfælde anderledes WordPress plugins bruges til at lette processen.
2. manuelt : ved at bruge denne metode skal du downloade en skrifttype downloadet fra webstedet og ændre CSS-filen.
3. temaer: Mange populære temaer har indbyggede muligheder for at tilpasse dine skrifttyper (bemærk – vi dækker ikke denne mulighed, da processen vil variere afhængigt af det tema, du bruger.

Mulighed 1 – Skift WordPress-skrifttyper med plugins

Hvis vi er ligeglade med globale ændringer, kan vi installere WordPress plugins som vil ændre skrifttyperne på din hjemmeside.

Funktioner i Custom Font Plugins

Open source-software har en fordel for samfundets interesse, og WordPress har også den fordel. Adskillige WordPress-plugins giver dig mulighed for at tilføje brugerdefinerede skrifttyper. Hvordan vælger man et passende plugin, når der er så mange? Hvad er funktionerne i WordPress-plugins med tilpassede skrifttyper?

Her er nogle punkter at overveje:

• Mulighed for at bruge en tilpasset skrifttype
• Mulighed for at bruge flere skrifttyper
• Overskrifter og målkomponenter
• Bonus: muligheden for at ændre skrifttypeindstillinger fra den visuelle editor

Det er alt. Den første egenskab på listen er meget vigtig. Du kan stadig downloade skrifttyper fra websteder som DaFont, Font Squirrel osv., men du skal kunne uploade dem til WordPress.

Lad os se på nogle plugins til WordPress, der giver dig mulighed for at uploade brugerdefinerede skrifttyper.

1. Bedre Awesome Font

Dette WordPress-plugin giver brugerne mulighed for automatisk at kombinere den nyeste version af Better Font Awesome-skrifttyper med CSS, kortkoder og mere. Derudover opdateres dette WordPress-plugin automatisk.

Du finder der som funktioner: regelmæssige opdateringer, en kortkodegenerator, kompatibilitet med andre WordPress-plugins osv ...

Downloade | demo | Web-hosting

2. Google Fonts til WordPress

Dette WordPress-plugin består af specielle 877-skrifttyper, som giver dig mulighed for at bruge alle skrifttyperne på dine WordPress-websteder. Takket være sin forhåndsvisning af realtid giver den dig mulighed for at se, hvordan dit websted ser ud, når skrifttypen er anvendt. 

Derudover vil du være i stand til at gemme den og redigere den på frontend, når du finder den kombination, du vil nyde.

Funktionerne inkluderer: en forhåndsvisning af realtid, a ret avanceret SEO, flersproget support, support til flere 870 + Google-skrifttyper, lette opdateringer og mere.

Downloade | demo | Web-hosting

3. Fonts Plugin

Fonts Plugin er et gratis WordPress-plugin, der giver brugerne adgang til Google Fonts og Adobe Fonts-biblioteker. Med dette WordPress-plugin kan du vælge mellem mere end 1000 Google- og Adobe-skrifttyper, bruge flere skrifttyper på dit websted og teste forskellige muligheder med plugin's real-time preview-funktion i WordPress-tilpasningen.

For flere måder at tilpasse din hjemmesidetypografi som skriftstørrelse, bogstavafstand og linjehøjde, kan du opgradere til premium-versionen, Fonts Plugin Pro.Downloade | demo | Web-hosting

4. Nem Google Fonts

Easy Google Fonts er en af bedste WordPress-plugins for at tilpasse typografien på din hjemmeside. Ligesom Fonts Plugin giver det dig mulighed for at vælge mellem hundredvis af Google Fonts og forhåndsvise dem i Customizer, før du tilføjer dem til dit websted.

Selvom det giver adgang til et mindre antal Google-skrifttyper, er det unikt ved, at det giver dig mulighed for at oprette brugerdefinerede skrifttypekontroller og regler i admin-området, som straks vises i WordPress-tilpasningen.

Downloade | demo | Web-hosting

Mulighed 2 – Installer WordPress brugerdefinerede skrifttyper manuelt

Ved at bruge @font-face-direktivet kan du forbinde en eller flere skrifttyper til dit websted. Men denne metode har sine fordele og ulemper.

fordele:

• Takket være CSS kan du forbinde skrifttyper af ethvert format: ttf, otf, woff, svg.
• Skrifttypefiler vil være placeret på din server – du er ikke afhængig af tredjepartstjenester.

ulemper :

• For den korrekte skrifttypeforbindelse for hver typografi skal du registrere en separat kode.
• Uden at kende CSS kan du let blive forvirret.

Men det er ikke et reelt problem, hvis du kan bare kopier en færdig kode og hvor du skal angive dine værdier.

Remarque : Før du begynder, skal du sørge for at oprette et børnetema til din hjemmeside. På denne måde kan du foretage alle ændringer i dit underetema, og forlade dit hovedtema, så du nemt kan opdatere det, hvis det bliver nødvendigt i fremtiden.

Trin 1: Opret en "skrifttyper"-mappe

I dit underetema skal du oprette en ny "skrifttyper"-mappe under: wp-indhold/temaer/dit-barn-tema/skrifttyper

Trin 2. Upload de downloadede skrifttypefiler til dit websted

Dette kan gøres via dit hosting kontrolpanel eller via FTP.

Tilføj alle skrifttypefiler til den nyligt tilføjede skrifttypemappe: wp-content/themes/ I dit underetema skal du oprette en ny "skrifttyper"-mappe under: wp-indhold/temaer/dit-barn-tema/skrifttyper som du har skabt.

Trin 3. Importer skrifttyper via underordnet tema stilark

Åbn filen style.css af dit underetema og tilføj følgende kode i begyndelsen af ​​CSS-filen (efter barnetema-kommentaren):

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont.eot');
src: url('fonts/WebFont.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont.woff') format('woff'),
url('fonts/WebFont.ttf') format('truetype'),
url('fonts/WebFont.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: normal;
}

hvor MyWebFont er navnet på skrifttypen, og værdien af ​​src-egenskaben (dataene i parentes i anførselstegn) er deres placering (relative links). Vi skal specificere hver stil separat.

Da vi først forbinder den normale stil, indstiller vi egenskaberne for skrifttypevægt og skrifttype til normal.

Trin 4. Når du tilføjer kursiv, skriv følgende:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic.eot');
src: url('fonts/WebFont-Italic.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic.woff') format('woff'),
url('fonts/WebFont-Italic.ttf') format('truetype'),
url('fonts/WebFont-Italic.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: italic;
}

Når alt er det samme, er vi de eneste, der vedhæfter egenskaben skrifttypestil til kursiv.

Trin 5. Tilføj følgende kode for at tilføje den fed skrifttype:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Bold.eot');
src: url('fonts/WebFont-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Bold.woff') format('woff'),
url('fonts/WebFont-Bold.ttf') format('truetype'),
url('fonts/WebFont-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: normal;
}

Hvor vi sætter egenskaben font-weight til fed.

Husk at angive den korrekte placering af skrifttypefilerne for hver typografi.

Trin 6. For at forbinde fed kursiv skal du skrive følgende:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic-Bold.eot');
src: url('fonts/WebFont-Italic-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic-Bold.woff') format('woff'),
url('fonts/WebFont-Italic-Bold.ttf') format('truetype'),
url('fonts/WebFont-Italic-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: italic;
}

Nå, det er det. Nu hvor du har forbundet fire skrifttypestile til dit websted.

Men der er én bemærkning: denne skrifttypeforbindelse vises ikke korrekt i Internet Explorer 8. Trøsten er, at der er meget få mennesker, der stadig bruger IE8.

Andre anbefalede ressourcer

Vi inviterer dig også til at konsultere nedenstående ressourcer for at komme videre i grebet og kontrollen af ​​dit websted og blog.

• 10 WordPress harmonika-plugins til en hjemmeside
• Sådan tilføjer du flere kolonner i WordPress
• Nogle plugins til at integrere Google-tjenester på din blog
• 5 WordPress-plugins til visning af underretninger
• Ved hjælp af forskellige baggrunde WordPress

Konklusion

Hvad er det første brugere bemærker, når de besøger din hjemmeside? Det er rigtigt, dets design! Det meste af designet er afhængig af korrekt brug af smukke skrifttyper. Så du skal passe på din hjemmesides skrifttypedesign. Tilføj kode eller brug et af de ovennævnte plugins til at integrere en ny skrifttype. Hvordan du vælger det er op til dig.

Sørg for, at du ikke bruger mere end to skrifttyper på samme websted. Da jo flere brugerdefinerede skrifttyper du tilføjer til hjemmesiden, jo mere vil hjemmesidehastigheden falde.

Det er det for denne artikel, der viser dig, hvordan du tilføjer brugerdefinerede skrifttyper til et WordPress-websted. Vi inviterer dig til at prøve. Hvis du har nogen bekymringer eller forslag, så lad os det vide inden for kommentarer.

Du vil dog også kunne konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.

En medarbejder, del denne artikel på dine forskellige sociale netværk.   

...