Sådan føjes tilpassede skrifttyper til dit WordPress-sted

Sådan føjes tilpassede skrifttyper til dit WordPress-sted

Hvorfor gøre din blog kedelig ved hjælp af standard skrifttyper? Lad din blog tale om din livlige personlighed og de emner, du dækker med en lang række brugerdefinerede skrifttyper. Brugerdefinerede skrifttyper er en dejlig funktion, der giver din blog mulighed for at se foretrukne ud for andre.


Lad os se det i øjnene; vi elsker alle blogs og sider med de rigtige skrifttyper. De dekorerer ikke kun webstedet, 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 specialiserede plugins.

Og her opstår to spørgsmål – hvor man kan få tilpassede skrifttyper til WordPress og hvordan man installerer brugerdefinerede skrifttyper på dit WordPress-sted.

Lad os finde ud af det.

 Hvorfor skal jeg bruge brugerdefinerede skrifttyper?

De dage er gået, hvor Times New Roman og Georgia blev betragtet som de eneste skrifttyper til tekster på websteder. I løbet af de sidste par år har fontområdet ændret sig fuldstændigt med fremkomsten af ​​skrifttyper som Google-skrifttyper og andre.

I dag er der hundredvis af gratis skrifttyper, informations- og træningshjælpemidler og ressourcer designet til design, tilgængelige på Internettet. I modsætning til Adobe Illustrator, Photoshop og andre klassiske applikationer giver WordPress dig ikke fuld kontrol over skrifttyper som standard. Kun nogle temaer vælger at understøtte og bruge brugerdefinerede skrifttyper.

Derfor lærer du i dette indlæg, hvordan du finder passende tilpassede skrifttyper, og hvordan du bruger dem på dit WordPress-sted.

Betydningen af ​​at bruge brugerdefinerede skrifttyper

Hvorfor ændre skrifttyper, led mellem ord, linjeafstand, bogstavafstand eller fontmætning, spørger du? Det er som det kan, nogle studier beviser det typografi forbedrer læseforståelse.

Meget afhænger af konstruktionen af ​​skrifttyper. På et bevidst og underbevidst niveau – alle evaluerer indholdet af en webside efter design.

Skriftdesign påvirker læserne, selvom de ikke er opmærksomme på det. At opgive fontdesignet betyder at opgive selve udviklingen! Stemningen hos læseren afhænger af det. Skrifttypen gør det lettere at læse eller tvinger brugerne til at forlade siden.

Alle webbrowsere inkluderer et sæt standardskrifttyper. Dette betyder, at hvis skrifttypen ikke er angivet i CSS på siden, vil standardversionen blive brugt. Du kan altid bruge standardfonte, men de komplicerer brugernes arbejde. Derfor er det vigtigt at bruge en brugerdefineret skrifttype. Hvis dit tema ikke giver dig muligheder for at ændre skrifttypen, kan mange websteder og værktøjer hjælpe.

Google-skrifttypealternativer

Hvor finder du tilpassede skrifttyper

Mange af jer ved om gratis Google-skrifttyper. Der er mange flere steder, hvor du kan finde smukke skrifttyper. Nogle af dem er gratis til personlig brug. Hvis du har brug for kommerciel brug, har du brug for en licens. Google-skrifttyper og Adobe Edge-skrifttyper er gratis. Derfor er de ikke så unikke. Og det passer ikke os.

Her er et par stykker andre ressourcer til at finde skrifttyper til fri og kommerciel brug:

  1. Template Monster – På webstedet TemplateMonster markedsplads finder du alt det webdesign, du har brug for. Der er også mange skrifttyper og fontpakker til personlig brug til en lav pris. De præsenteres også på ONE webudviklingssæt. Samlingen er enorm og kreativ. For at hjælpe dig med at vælge, alle skrifter præsenteret på brochurer eller rammer. Hver skrifttype præsenteres også med en kommerciel licens.
  2. MyFonts – MyFonts tilbyder i øjeblikket det største udvalg af skrifttyper i verden. Priserne her er imidlertid også i det højere segment. Så hvis du har et stramt budget, er det måske ikke dig.
  3. FontSpring – Fonttspring sælger smarte skrifttyper til kommerciel brug. Men i næsten enhver familie 1-2 gratis skrifttyper, der kan bruges til personlige formål. Derudover er der et separat afsnit med gratis skrifttyper. Samlingen er vibran. Men du skal nøje studere licensoplysningerne for en bestemt skrifttype, før du downloader.
  4. Cufonfonts – Det er også en omfattende samling af forskellige skrifttyper. Vælg en vilkårlig, og du vil se en side med detaljerede oplysninger om det. Der er mange gratis skrifttyper, og de er opdelt i individuelle sektioner. Sorteringssystemet på CufonFonts er ret fleksibelt og praktisk. Webfont-support er også inkluderet.
  5. Dafont – En anden tilgængelig samling af 3.500 gratis skrifttyper. De fleste af dem er kun beregnet til personlig brug. En dejlig funktion DaFont er et kategorisystem. Du kan vælge skrifttyper i stil med tegneserier, videospil, vintage eller stiliseret som japanske tegn.

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å webstedet. Derefter vil udseendet på dit websted være ensartet. Når du har valgt dine skrifttyper, skal du sørge for at downloade filerne til hver stil, du bruger (normal, fed, kursiv osv.).

Nu hvor du har valgt den korrekte skrifttype til webstedet, lad os finde ud af, hvordan du tilføjer den.

Sådan føjes tilpassede skrifttyper til WordPress

Der er et par måder at tilføje skrifttyper til et WordPress-sted:

  1. plugins: i dette tilfælde bruges forskellige WordPress-plugins til at lette processen.
  2. manuelt: ved hjælp af denne metode har du brug for en downloadet fontoverførsel til webstedet og rediger CSS-fil.
  3. Temaer: Mange populære temaer inkluderer indbyggede indstillinger til tilpasning af dine skrifttyper (bemærk – vi dækker ikke denne mulighed, da processen vil variere baseret på det tema, du bruger, men premium-temaer som alt WordPress-temaet vil tilbyde online dokumenter, som du nemt kan følge – ligesom denne vejledning til at tilføje tilpassede skrifttyper til Total)

Valgmulighed 1 – Skift WordPress-skrifttyper med plugins

Hvis vi ikke er interesseret i globale ændringer, kan vi installere WordPress-plugins, der ændrer skrifttyperne på dit websted.

Egenskaber ved brugerdefinerede font plugins

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

Her er et par punkter, du skal tage højde for:

  • Mulighed for at bruge brugerdefineret font
  • Mulighed for at bruge mere end en font
  • Måloverskrifter og komponenter
  • Bonus: muligheden for at ændre skrifttypeindstillinger fra den visuelle editor

Det er alt. Den første funktion på listen er meget vigtig. Du kan altid downloade skrifttyper fra sider som DaFont, Font Squirrel osv., Men du skal være i stand til at uploade dem til WordPress.

Lad os se på et par plugins til WordPress, der giver dig mulighed for at uploade tilpassede skrifttyper.

Tilpasset font uploader

Tilpasset font uploader

Dette plugin giver dig mulighed for at downloade Google-skrifttyper og anvende dem på forskellige elementer i din blog. For eksempel til overskrifter eller krop af artiklen eller siden.

Brug enhver skrifttype

Brug enhver skrifttype

Dette er et WordPress-plugin, der giver dig en praktisk grænseflade til at downloade skrifttyper og bruge dem direkte gennem den visuelle editor. WordPress-visuelle editor kan automatisk ændre skrifttypen på enhver tekst. Dette plugin tilbyder flere funktioner, hvilket gør processen med at tilføje tilpassede skrifttyper meget mere håndterbar.

WP Google-skrifttyper

WP Google-skrifttyper

Med WP Google-skrifttyper kan du bruge Google-fontkataloget. En af de fantastiske fordele ved dette plugin er tilføjelsen af ​​tæt på 1000 Google-skrifttyper. Selvom du kan tilmelde Google-skrifttyper manuelt, er det meget lettere at bruge et plugin til de fleste brugere.

Sådan installeres skrifttyper med et plugin?

Lad os tage, for eksempel WP Google-skrifttyper. Bare installer dette plugin fra det officielle WordPress-arkiv og åbn sektionen Google Fonts.

WP Google-skrifttyper

Du ser et kontrolpanel for Google-font her. Vælg skrifttyper og ændre forskellige indstillinger, f.eks. Skrifttype, de elementer, som det anvendes osv.

Valgmulighed 2 – Installer WordPress tilpassede skrifttyper manuelt

Gennem @ font-face-direktivet kan du forbinde både en eller flere skrifttyper til dit websted. Men denne metode har sine fordele og ulemper.

Fordele:

  • Gennem CSS kan du forbinde skrifttyper i ethvert format: ttf, otf, woff, svg.
  • Fontfiler vil være placeret på din server – du er ikke afhængig af tredjeparts tjenester.

Ulemper:

  • For den korrekte fontforbindelse for hver stil, skal du registrere en separat kode.
  • Uden at kende CSS, kan du nemt forveksles.

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

Bemærk: Før du starter, skal du sørge for at oprette et underordnet tema til dit websted. På denne måde kan du foretage alle redigeringer af dit barnetema og lade dit kerne tema være i takt, så du nemt kan opdatere det efter behov i fremtiden.

Trin 1: Opret en “fonts” -mappe

Opret inden for dit barnetema en ny “skrifttype” -mappe under: wp-content / temaer / dit-barn-tema / fonte

Trin 2. Upload de downloadede fontfiler til dit websted

Dette kan gøres via kontrolpanelet på din hosting eller via FTP.

Føj alle fontfiler til den nyligt tilføjede fontmappe: wp-content / temaer / dit-barn-tema / fonte du oprettede.

Trin 3. Importer skrifttyper via typografiarket for underordnede temaer

Åbn dit barns tema’s style.css-fil, og tilføj følgende kode til begyndelsen af ​​CSS-filen (efter kommentarer til underordnet tema):

@ Font-face {
font-family: 'MyWebFont';
src: url ('skrifttyper / 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-vægt: normal;
font-stil: 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 er nødt til at specificere hver stil separat.

Da vi først forbinder den normale stil, indstiller vi font-vægt og font-style egenskaber til normal.

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

@ Font-face {
font-family: 'MyWebFont';
src: url ('skrifttyper / WebFont-Italic.eot');
src: url ('fonts / WebFont-Italic.eot? #iefix') format ('embedded-opentype'),
url ('fonts / WebFont-Italic.woff') format ('woff'),
url ('skrifttyper / WebFont-Italic.ttf') format ('truetype'),
url ('fonts / WebFont-Italic.svg # svgwebfont') -format ('svg');
font-vægt: normal;
font-stil: kursiv;
}

Hvor alt er det samme, kun vi knyttet egenskaben til skrifttype til kursiv.

Trin 5. For at tilføje den fed skrift, tilføj følgende kode:

@ Font-face {
font-family: 'MyWebFont';
src: url ('skrifttyper / WebFont-Bold.eot');
src: url ('skrifttyper / WebFont-Bold.eot? #iefix') format ('embedded-opentype'),
url ('skrifttyper / WebFont-Bold.woff') format ('woff'),
url ('skrifttyper / WebFont-Bold.ttf') format ('truetype'),
url ('fonts / WebFont-Bold.svg # svgwebfont') -format ('svg');
font-vægt: fed;
font-stil: normal;
}

Hvor vi indstiller font-vægtegenskaben til fed.

Husk at angive den korrekte placering af fontfilerne for hver stil.

Trin 6. For at forbinde fed skrift skal du indtaste følgende:

@ Font-face {
font-family: 'MyWebFont';
src: url ('skrifttyper / WebFont-Italic-Bold.eot');
src: url ('skrifttyper / WebFont-Italic-Bold.eot? #iefix') format ('embedded-opentype'),
url ('skrifttyper / WebFont-Italic-Bold.woff') -format ('woff'),
url ('skrifttyper / WebFont-Italic-Bold.ttf') format ('truetype'),
url ('skrifttyper / WebFont-Italic-Bold.svg # svgwebfont') -format ('svg');
font-vægt: fed;
font-stil: kursiv;
}

Nå, det er alt �� Nu har du forbundet fire skrifttyper til dit websted.

Men der er én bemærkning – denne fontforbindelse vises forkert i Internet Explorer 8. Trøsten er, at der stadig er meget få mennesker, der bruger IE8.

Indpakning af tilpassede skrifttyper til WordPress

Hvad er den første ting, som brugerne lægger mærke til, når de besøger dit websted? Rigtigt, dets design! Det meste af designet er afhængig af korrekt brug af smukke skrifttyper. Så du skal passe på skrifttypedesignet på dit websted. Tilføj kode, eller brug et af de ovennævnte plugins til at integrere en ny skrifttype. Hvilken måde du vælger det er op til dig.

Sørg for, at du ikke bruger mere end to skrifttyper på det samme sted. Da de mere tilpassede skrifttyper, du tilføjer til webstedet, desto langsommere bliver webstedshastigheden.

Det er alt, du er velkommen til at kommentere. 

Vi vil også være glade for at høre, hvilken mulighed du vælger for at tilføje en brugerdefineret skrifttype til dit websted, og hvor du finder din skrifttype.

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