Slik legger du til tilpassede skrifter på ditt WordPress-nettsted

Hvorfor gjøre bloggen din kjedelig ved å bruke vanlige skrifter? La bloggen din snakke om din livlige personlighet og temaene du dekker med et bredt utvalg av tilpassede skrifter. Tilpassede skrifter er en fin funksjon som gjør at bloggen din kan se foretrukket ut for andre.


La oss innse det; vi elsker alle blogger og nettsteder med riktige skrifter. De dekorerer ikke bare nettstedet, men er også med på å tiltrekke brukeren til innholdet ditt. Valget av standard WordPress-skrifter er imidlertid begrenset og avhenger av temaet du bruker. Den gode nyheten er at du kan legge dem til manuelt eller med spesialiserte plugins.

Og her oppstår to spørsmål – hvor du kan få tilpassede skrifter for WordPress og hvordan du installerer tilpassede skrifter på ditt WordPress-nettsted.

La oss finne det ut.

 Hvorfor skal jeg bruke tilpassede skrifter??

Dagene er borte da Times New Roman og Georgia ble ansett som de eneste skrifttypene for tekster på nettsteder. I løpet av de siste årene har fontområdet endret seg helt med bruk av skrifter som Google Font og andre.

I dag er det hundrevis av gratis skrifter, informasjon og opplæringshjelpemidler og ressurser designet for design, tilgjengelig på Internett. I motsetning til Adobe Illustrator, Photoshop og andre klassiske applikasjoner, gir WordPress deg ikke full kontroll over skrifter som standard. Bare noen temaer velger å støtte og bruke tilpassede skrifter.

I dette innlegget lærer du derfor hvordan du finner egendefinerte egendefinerte skrifter og hvordan du bruker dem på ditt WordPress-nettsted.

Viktigheten av å bruke tilpassede skrifter

Hvorfor endre skrifter, innrykk mellom ord, linjeavstand, bokstavavstand eller skriftmetning, spør du? Det er som det kan, noen studier beviser det typografi forbedrer leseforståelsen.

Mye avhenger av konstruksjon av skrifter. På et bevisst og underbevisst nivå – alle evaluerer innholdet på en webside etter design.

Fontdesign påvirker leserne, selv om de ikke tar hensyn til det. Å forlate fontdesignet betyr å forlate selve utviklingen! Stemningen til leseren avhenger av den. Skriften gjør det enklere å lese eller tvinger brukere til å forlate siden.

Alle nettlesere har et sett med standardskrifter. Dette betyr at hvis skriften ikke er spesifisert i CSS på siden, så vil standardversjonen brukes. Du kan alltid bruke standardfontene, men de kompliserer brukernes arbeid. Det er derfor det er viktig å bruke en tilpasset font. Hvis temaet ditt ikke gir deg muligheter for å endre font, kan mange nettsteder og verktøy hjelpe.

Google Font-alternativer

Hvor finner du egendefinerte skrifter

Mange av dere vet om gratis Google-skrifter. Det er mange flere nettsteder der du kan finne vakre skrifter. Noen av dem er gratis til personlig bruk. Hvis du trenger kommersiell bruk, trenger du lisens. Google-skrifter og Adobe Edge-skrifter er gratis. Derfor er de ikke så unike. Og dette passer ikke for oss.

Her er noen få andre ressurser for å finne skrifter for gratis og kommersiell bruk:

  1. Temp – På nettstedet TemplateMonster marketplace finner du alt du trenger for Web Design. Det er også mange skrifter og fontpakker for personlig bruk til en liten pris. De blir også presentert på ONE nettutviklingssett. Samlingen er enorm og kreativ. For å hjelpe deg med å velge, alle skrifter som presenteres på brosjyrer eller rammer. Hver skrift presenteres også med en kommersiell lisens.
  2. MyFonts – MyFonts tilbyr for tiden det største utvalget av skrifter i verden. Prisene her er imidlertid også i det høyere segmentet. Så hvis du har et stramt budsjett, er det kanskje ikke noe for deg.
  3. FontSpring – Fonttspring selger fancy skrifter for kommersiell bruk. Men i nesten hvilken som helst familie 1-2 gratis skrifter som kan brukes til personlige formål. Dessuten er det en egen seksjon med gratis skrifter. Samlingen er vibran. Men du må studere lisensinformasjonen for en bestemt skrift nøye før du laster ned den.
  4. Cufonfonts – Det er også en omfattende samling med forskjellige skrifter. Velg hvilken som helst, så ser du en side med detaljert informasjon om det. Det er mange gratis skrifter, og de er delt inn i individuelle seksjoner. Sorteringssystemet på CufonFonts er ganske fleksibelt og praktisk. Webfont-støtte er også inkludert.
  5. DaFont – En annen tilgjengelig samling med 3500 gratis skrifter. De fleste av dem er kun beregnet for personlig bruk. En fin funksjon DaFont er et kategorisystem. Du kan velge skrifter i stil med tegneserier, videospill, årgang eller stilisert som japanske tegn.

Valget av skrifter er veldig fristende fordi de alle er vakre. Men du skal ikke velge mye. Bruk ikke mer enn to fonter på nettstedet. Da vil utseendet til nettstedet ditt være konsistent. Når du har valgt fontene dine, må du laste ned filene for hver stil du bruker (vanlig, fet, kursiv osv.).

Nå som du har valgt riktig skrift for nettstedet, la oss finne ut hvordan du legger til den.

Hvordan legge til tilpassede skrifter til WordPress

Det er noen måter å legge til skrifter på et WordPress-nettsted:

  1. plugins: i dette tilfellet brukes forskjellige WordPress-plugins for å lette prosessen.
  2. manuelt: ved å bruke denne metoden, trenger du en nedlastet fontopplasting til nettstedet og rediger CSS-fil.
  3. temaer: Mange populære temaer inkluderer innebygde alternativer for å tilpasse skriftene dine (merk – vi vil ikke dekke dette alternativet siden prosessen vil variere basert på temaet du bruker, men førsteklasses temaer som Total WordPress-temaet vil tilby online dokumenter du enkelt kan følge – som denne guiden for å legge til tilpassede skrifter til Totalt)

Alternativ 1 – Endre WordPress-skrifter med plugins

Hvis vi ikke bryr oss om globale endringer, kan vi installere WordPress-plugins som vil endre skriftene på nettstedet ditt.

Kjennetegn på tilpassede font-plugins

Open source-programvare har en fordel for samfunnets interesse, og WordPress har også denne fordelen. Flere WordPress-plugins lar deg legge til tilpassede skrifter. Hvordan velge en passende plugin med så mange? Hva er funksjonene i tilpassede font-plugins?

Her er noen få punkter du må ta hensyn til:

  • Evne til å bruke tilpasset skrift
  • Evne til å bruke mer enn én font
  • Måltavler og komponenter
  • Bonus: muligheten til å endre fontinnstillinger fra den visuelle redigereren

Det er alt. Den første funksjonen på listen er veldig viktig. Du kan alltid laste ned skrifter fra nettsteder som DaFont, Font Squirrel, etc., men du må kunne laste dem opp til WordPress.

La oss se på noen få plugins for WordPress som lar deg laste opp tilpassede skrifter.

Tilpasset fontopplaster

Tilpasset fontopplaster

Denne pluginen lar deg laste ned Google-skrifter og bruke dem på forskjellige elementer i bloggen din. For eksempel til overskriftene eller kroppen til artikkelen eller siden.

Bruk hvilken som helst skrift

Bruk hvilken som helst skrift

Dette er en WordPress-plugin som gir deg et praktisk grensesnitt for å laste ned skrifter og bruke dem direkte gjennom den visuelle editoren. WordPress-visuelle redigereren kan automatisk endre skriften til hvilken som helst tekst. Denne pluginen tilbyr flere funksjoner, som gjør prosessen med å legge til tilpassede skrifter mye mer håndterbar.

WP Google-skrifter

WP Google-skrifter

Med WP Google Fonts kan du bruke Googles fontkatalog. En av de fantastiske fordelene med denne plugin-en er tillegg til nærmere 1000 Google-skrifter. Selv om du kan forfange Google-skrifter manuelt, er det mye enklere å bruke en plugin for de fleste brukere.

Slik installerer du skrifter med en plugin?

La oss ta for eksempel WP Google-skrifter. Bare installer denne pluginen fra det offisielle WordPress-depotet og åpne Google Font-delen.

WP Google-skrifter

Du ser et kontrollpanel for Google-font her. Velg skrifter og endre forskjellige innstillinger, for eksempel skriftstilen, elementene den brukes på osv.

Alternativ 2 – Installer WordPress tilpassede skrifter manuelt

Gjennom @ font-face-direktivet kan du koble både en eller flere skrifter til nettstedet ditt. Men denne metoden har sine fordeler og ulemper.

Pros:

  • Gjennom CSS kan du koble skrifter av alle format: ttf, otf, woff, svg.
  • Fontfiler vil være plassert på serveren din – du vil ikke være avhengig av tredjeparts tjenester.

Ulemper:

  • For riktig fonttilkobling for hver stil, må du registrere en egen kode.
  • Uten å vite CSS, kan du bli forvirret enkelt.

Men det er ikke et reelt problem hvis du kan bare kopier en ferdig kode og hvor du trenger å spesifisere verdiene dine.

Merk: Før du starter, må du huske å lage et barnetema for nettstedet ditt. På denne måten kan du gjøre alle redigeringer av barnet ditt, slik at kjernetemaet ditt blir i takt, slik at du enkelt kan oppdatere det etter behov i fremtiden.

Trinn 1: Lag en “fonter” -mappe

Opprett en ny “fonter” -mappe under: wp-content / themes / din-barn-tema / skrifter

Trinn 2. Last opp nedlastede fontfiler til nettstedet ditt

Dette kan gjøres gjennom kontrollpanelet til vertskapet ditt eller via FTP.

Legg til alle fontfiler i mappen som nylig er lagt til: wp-content / themes / din-barn-tema / skrifter du opprettet.

Trinn 3. Importer skrifter via stiltemaet for underordnet tema

Åpne style.css-filen til barnet ditt og legg til følgende kode i begynnelsen av CSS-filen (etter kommentaren til barnetemaet):

@ 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-vekt: normal;
font-stil: normal;
}

Hvor MyWebFont er navnet på skriften, og verdien på src-egenskapen (dataene i parentes i anførselstegn) er deres plassering (relative lenker). Vi må spesifisere hver stil separat.

Siden vi først kobler den normale stilen, setter vi fontvekten og font-stilegenskapene til normal.

Trinn 4. Når du legger til 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-vekt: normal;
font-stil: kursiv;
}

Der alt er det samme, bare vi knyttet egenskapen til skrifttypen til kursiv.

Trinn 5. For å legge til den fet skrift, legger du til følgende kode:

@ 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-vekt: fet;
font-stil: normal;
}

Hvor vi setter fontvektegenskapen til fet skrift.

Husk å angi riktig plassering av skriftfilene for hver stil.

Trinn 6. For å koble fet skrift, skriver du ut 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-vekt: fet;
font-stil: kursiv;
}

Det er alt �� Nå har du koblet fire skriftstiler til nettstedet ditt.

Men det er en merknad – denne fonttilkoblingen vil vises feil i Internet Explorer 8. Trøsten er at det fortsatt er veldig få mennesker som bruker IE8.

Innpakking av tilpassede skrifter for WordPress

Hva er det første brukerne legger merke til når de besøker nettstedet ditt? Helt riktig, dets design! Det meste av designet er avhengig av riktig bruk av vakre skrifter. Så du må ta vare på skriftdesignen til nettstedet ditt. Legg til kode, eller bruk en av plugins som er nevnt over for å legge inn en ny skriftstil. Hvilken måte du velger det er opp til deg.

Forsikre deg om at du ikke bruker mer enn to skrifter på samme nettsted. Siden de mer tilpassede skriftene du legger til nettstedet, desto lavere blir hastigheten til nettstedet.

Det er alt, føl deg fri til å kommentere. 

Vi vil også gjerne høre hvilket alternativ du velger å legge til en tilpasset font på nettstedet ditt og hvor du finner skrifttypen din.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me