Vil du lære hvordan du legger til egendefinerte fonter på et WordPress-nettsted?
Hvorfor gjøre bloggen din kjedelig ved å bruke standard fonter? La bloggen din snakke om din livlige personlighet og emnene du dekker med et bredt utvalg av egendefinerte fonter. Egendefinerte fonter er en kul funksjon som får bloggen din til å se å foretrekke fremfor andre.
La oss innse det; vi elsker alle blogger og nettsteder med de riktige fontene. De dekorerer ikke bare nettstedet, men hjelper også å tiltrekke brukeren til innholdet ditt. Valget av standard WordPress-fonter er imidlertid begrenset og avhenger av temaet du bruker. Den gode nyheten er at du kan legge dem til manuelt eller med WordPress plugins spesialisert.
Og her oppstår to spørsmål: hvor kan du få tilpassede fonter for WordPress og hvordan du installerer tilpassede fonter på nettstedet ditt.
La oss finne ut.
Hvorfor bør jeg bruke egendefinerte fonter?
Borte er tiden da Times New Roman og Georgia ble ansett som de eneste skrifttypene for tekst på nettsteder. I løpet av de siste årene har skriftrommet totalt endret seg med bruk av fonter som f.eks Google Fonts og andre.
I dag er det hundrevis av gratis fonter, informasjons- og opplæringshjelpemidler og designressurser tilgjengelig på Internett. I motsetning til Adobe Illustrator, Photoshop og andre klassiske apper, gir WordPress deg ikke full kontroll over standardfonter. Bare visse WordPress-temaer velger å støtte og bruke tilpassede fonter.
Derfor vil du i denne artikkelen lære hvordan du finner passende tilpassede fonter og bruker dem på WordPress-nettstedet ditt.
Viktigheten av å bruke tilpassede fonter
Hvorfor endre fonter, ordinnrykk, linjeavstand, bokstavavstand eller skriftmetning, spør du? Noen studier viser imidlertid det typografi forbedrer leseforståelsen.
Mye avhenger av konstruksjonen av fontene. På et bevisst og underbevisst nivå – alle evaluerer innholdet på en nettside ved design.
Skriftdesign påvirker leserne, selv om de ikke legger merke til det. Å gi opp skriftdesign betyr å gi opp utviklingen i seg selv! Leserens humør avhenger av det. Fonten gjør det lettere å lese eller tvinger brukere til å forlate siden.
Alle nettlesere inkluderer et sett med standardfonter. Dette betyr at hvis fonten ikke er spesifisert i CSS på siden, vil standardversjonen bli brukt. Du kan fortsatt bruke standardfontene, men de gjør det vanskeligere for brukerne. Dette er grunnen til at det er viktig å bruke en tilpasset skrift. Hvis WordPress-temaet ditt ikke gir deg muligheter til å endre skrifttypen, er det mange nettsteder og verktøy som kan hjelpe.
Alternativer for Google Fonts
Mange av dere kjenner til Google skrifttyper. Det er mange flere nettsteder hvor du kan finne vakre fonter. Noen av dem er gratis for personlig bruk. Hvis du trenger kommersiell bruk, trenger du en lisens. Google Fonts og Adobe Edge Fonts er gratis. Dette er grunnen til at de ikke er så unike.
Her er noen andre ressurser for å finne fonter for gratis og kommersiell bruk:
- Temp — På TemplateMonster-nettstedet finner du alt du trenger for webdesign. Det finnes også mange fonter og fontpakker for personlig bruk for en liten pris. I tillegg, For å hjelpe deg å velge, presenteres alle fonter på brosjyrer eller rammer. Hver font er også presentert med en kommersiell lisens.
- MyFonts — MyFonts tilbyr for tiden det største utvalget av fonter i verden. Prisene her er imidlertid også i det øvre segmentet. Så hvis du har et stramt budsjett, er dette kanskje ikke noe for deg.
- FontSpring — Fontspring selger nye fonter for kommersiell bruk. Men i nesten hver familie kan 1-2 gratis fonter brukes til personlige formål. Det er også en egen seksjon med gratis fonter. Samlingen er levende. Men du må studere lisensinformasjonen for en bestemt skrift nøye før du laster ned.
- Cufonfonter — Det er også en enorm samling av forskjellige fonter. Velg en, og du vil se en side med detaljert informasjon om den. Det er nok av gratis fonter, og de er delt inn i individuelle seksjoner. Sorteringssystemet på CufonFonts er ganske fleksibelt og praktisk. Webfont-støtte er også inkludert.
- DaFont — Nok en tilgjengelig samling av 3 gratis fonter. De fleste av dem er kun designet for personlig bruk. En kul DaFont-funksjon er et kategorisystem. Du kan velge fonter i stil med tegneserier, videospill, vintage osv….
Valget av skrifttyper er veldig fristende fordi de alle er vakre. Men du bør ikke velge mye. Ikke bruk mer enn to fonter på et nettsted web. Og såutseendet til nettstedet ditt vil være konsekvent. Når du har valgt skriftene dine, sørg for å laste opp filene for hver stil du skal bruke (vanlig, fet, kursiv, osv.).
Nå som du har valgt riktig skrift for nettstedet ditt, la oss finne ut hvordan du legger den til.
Hvordan legge til egendefinerte fonter til WordPress
Det er flere måter å legge til fonter på et WordPress-nettsted:
- plugins : i dette tilfellet annerledes WordPress plugins brukes for å lette prosessen.
- manuelt : ved å bruke denne metoden, trenger du en skriftnedlasting lastet ned fra nettstedet og endre CSS-filen.
- Temaer: Mange populære temaer har innebygde alternativer for å tilpasse skriftene dine (merk – vi vil ikke dekke dette alternativet da prosessen vil variere avhengig av temaet du bruker.
Alternativ 1 – Endre WordPress-fonter med plugins
Hvis vi ikke bryr oss om globale endringer, kan vi installere WordPress plugins som vil endre skriftene på nettstedet ditt.
Funksjoner av tilpassede font-plugins
Åpen kildekode-programvare har en fordel for fellesskapets interesse, og WordPress har også den fordelen. Flere WordPress-plugins lar deg legge til egendefinerte fonter. Hvordan velge en passende plugin når det er så mange? Hva er funksjonene til WordPress-plugins med tilpasset font?
Her er noen punkter du bør vurdere:
- Evne til å bruke en tilpasset font
- Evne til å bruke flere fonter
- Overskrifter og målkomponenter
- Bonus: muligheten til å endre fontinnstillinger fra den visuelle editoren
Det er alt. Den første egenskapen i listen er veldig viktig. Du kan fortsatt laste ned fonter fra nettsteder som DaFont, Font Squirrel, etc., men du må kunne laste dem opp til WordPress.
La oss se på noen plugins for WordPress som lar deg laste opp egendefinerte fonter.
1. Bedre Awesome Font
Dette WordPress-plugin-programmet lar brukerne automatisk kombinere den nyeste versjonen av Better Font Awesome-skrifter med CSS, snarveier og mer. I tillegg oppdateres denne WordPress-pluginen automatisk.
Du finner det som funksjoner: vanlige oppdateringer, en kortkodegenerator, kompatibilitet med andre WordPress-plugins osv.
2. Google Fonts for WordPress
Denne WordPress-plugin-en består av spesielle 877-skrifter, som lar deg bruke alle skriftene på WordPress-nettsteder. Takket være forhåndsvisningen i sanntid, lar den deg se hvordan nettstedet ditt vil se ut når skriften er brukt.
I tillegg vil du kunne lagre den og redigere den på fronten når du finner kombinasjonen du vil like.
Funksjonene inkluderer: en forhåndsvisning av sanntid, a ganske avansert SEO, flerspråklig støtte, støtte for flere 870 + Google-skrifter, enkle oppdateringer og mer.
3. Fonts Plugin
Fonts Plugin er en gratis WordPress-plugin som lar brukere få tilgang til Google Fonts og Adobe Fonts-bibliotekene. Med denne WordPress-pluginen kan du velge mellom over 1000 Google- og Adobe-fonter, bruke flere fonter på nettstedet ditt, og teste ulike alternativer med pluginens sanntidsforhåndsvisningsfunksjon i WordPress-tilpasseren.
For flere måter å tilpasse nettstedets typografi som skriftstørrelse, bokstavavstand og linjehøyde, kan du oppgradere til premiumversjonen, Fonts Plugin Pro.Last ned | dEMO | Webhotell
4. Enkel Google Fonts
Easy Google Fonts er en av beste WordPress-plugins for å tilpasse typografien til nettstedet ditt. I likhet med Fonts Plugin lar den deg velge blant hundrevis av Google Fonts og forhåndsvise dem i Customizer før du legger dem til på nettstedet ditt.
Selv om det gir tilgang til et mindre antall Google Fonts, er det unikt ved at det lar deg lage egendefinerte fontkontroller og regler i admin-området, som umiddelbart vises i WordPress-tilpasseren.
Alternativ 2 – Installer tilpassede WordPress-fonter manuelt
Ved å bruke @font-face-direktivet kan du koble en eller flere fonter til nettstedet ditt. Men denne metoden har sine fordeler og ulemper.
fordeler:
- Takket være CSS kan du koble til fonter i alle formater: ttf, otf, woff, svg.
- Fontfiler vil bli plassert på serveren din – du er ikke avhengig av tredjepartstjenester.
ulemper :
- For riktig skriftforbindelse for hver stil må du registrere en egen kode.
- Uten å kunne CSS kan du lett bli forvirret.
Men det er ikke et reelt problem hvis du kan bare kopier en ferdig kode og hvor du må spesifisere verdiene dine.
Note : Før du begynner, sørg for å gjøre det lage et barnetema for nettstedet ditt. På denne måten kan du gjøre alle endringer i barnetemaet ditt, og la hovedtemaet være igjen slik at du enkelt kan oppdatere det om nødvendig i fremtiden.
Trinn 1: Opprett en "fonts"-mappe
I barnetemaet ditt oppretter du en ny "fonter"-mappe under: wp-innhold/temaer/ditt-barn-tema/fonter
Trinn 2. Last opp de nedlastede fontfilene til nettstedet ditt
Dette kan gjøres via ditt vertskontrollpanel eller via FTP.
Legg til alle skriftfiler i mappen for nylig lagt til fonter: wp-content/themes/ Opprett en ny "fonts"-mappe i barnetemaet ditt under: wp-innhold/temaer/ditt-barn-tema/fonter som du opprettet.
Trinn 3. Importer skrifter via stilark for undertema
Åpne filen style.css av barnetemaet ditt og legg til følgende kode i begynnelsen av CSS-filen (etter barnetemakommentaren):
@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å fonten og verdien til src-egenskapen (dataene i parentes i anførselstegn) er deres plassering (relative lenker). Vi må spesifisere hver stil separat.
Siden vi kobler til normal stil først, setter vi egenskapene font-weight og font-style 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-weight: normal;
font-style: italic;
}Når alt er likt, er vi de eneste som legger skriftstilegenskapen til kursiv.
Trinn 5. For å legge til den fete skriften, legg 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-weight: bold;
font-style: normal;
}Der vi satte egenskapen font-weight til fet skrift.
Husk å spesifisere riktig plassering av skriftfilene for hver stil.
Trinn 6. For å koble til fet kursiv, skriv inn 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;
}Vel, det er det. Nå som du har koblet fire skriftstiler til nettstedet ditt.
Men det er en merknad: denne fonttilkoblingen vil ikke vises riktig i Internet Explorer 8. Trøsten er at det er svært få som fortsatt bruker IE8.
Andre anbefalte ressurser
Vi inviterer deg også til å konsultere ressursene nedenfor for å komme videre i grepet og kontrollen av nettstedet og bloggen din.
- 10 WordPress trekkspill-plugins for et nettsted
- Hvordan legge til flere kolonner i WordPress
- Noen plugins å integrere Google-tjenester på bloggen din
- 5 WordPress-plugins for å vise varsler
- Ved hjelp av forskjellige bakgrunner WordPress
konklusjonen
Hva er det første brukerne legger merke til når de besøker nettstedet ditt? Det stemmer, designet! Det meste av designet er avhengig av riktig bruk av vakre fonter. Så du må ta vare på fontdesignet på nettstedet ditt. Legg til kode eller bruk en av pluginene nevnt ovenfor for å bygge inn en ny skriftstil. Hvordan du velger det er opp til deg.
Pass på at du ikke bruker mer enn to fonter på samme nettside. Siden jo flere tilpassede fonter du legger til nettstedet, desto mer vil hastigheten på nettstedet synke.
Det er det for denne artikkelen som viser deg hvordan du legger til egendefinerte fonter på et WordPress-nettsted. Vi inviterer deg til å prøve. Hvis du har noen bekymringer eller forslag, vennligst gi oss beskjed innen commentaires.
Du vil imidlertid også kunne konsultere våre ressources, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.
I mellomtiden del denne artikkelen på de forskjellige sosiale nettverkene dine.
...
