Hur du lägger till anpassade teckensnitt på din WordPress-webbplats

Hur du lägger till anpassade teckensnitt på din WordPress-webbplats

Varför göra din blogg tråkig med standardteckensnitt? Låt din blogg prata om din livliga personlighet och de ämnen du täcker med en mängd olika anpassade teckensnitt. Anpassade teckensnitt är en trevlig funktion som gör att din blogg ser bättre ut än andra.


Låt möta det; vi älskar alla bloggar och webbplatser med rätt typsnitt. De dekorerar inte bara webbplatsen utan hjälper också att locka användaren till ditt innehåll. Valet av standard WordPress-typsnitt är dock begränsat och beror på det tema du använder. Den goda nyheten är att du kan lägga till dem manuellt eller med specialiserade plugins.

Och här uppstår två frågor – var du kan få anpassade teckensnitt för WordPress och hur man installerar anpassade teckensnitt på din WordPress-webbplats.

Låt oss ta reda på.

 Varför ska jag använda anpassade teckensnitt?

Dagarna är borta då Times New Roman och Georgia ansågs vara de enda teckensnitten för texter på webbplatser. Under de senaste åren har teckensnittsutrymmet förändrats helt med tillkomsten av teckensnitt som Google-teckensnitt och andra.

Idag finns det hundratals gratis typsnitt, information och utbildningshjälpmedel och resurser utformade för design, tillgängliga på Internet. Till skillnad från Adobe Illustrator, Photoshop och andra klassiska applikationer ger WordPress dig inte full kontroll över teckensnitt som standard. Endast vissa teman väljer att stödja och använda anpassade teckensnitt.

Därför kommer du i det här inlägget att lära dig hur du hittar lämpliga anpassade teckensnitt och hur du använder dem på din WordPress-webbplats.

Betydelsen av att använda anpassade teckensnitt

Varför ändra teckensnitt, strecksats mellan ord, radavstånd, bokstavsavstånd eller teckenmättnad, frågar du? Vara det som det kan, vissa studier bevisar det typografi förbättrar läsförståelsen.

Mycket beror på konstruktionen av teckensnitt. På en medveten och undermedveten nivå – alla utvärderar innehållet på en webbsida efter design.

Teckensnittdesign påverkar läsarna, även om de inte uppmärksammar det. Att överge typsnittet innebär att man överger själva utvecklingen! Stämningen hos läsaren beror på det. Teckensnittet gör antingen lättare att läsa eller tvingar användare att lämna sidan.

Alla webbläsare har en uppsättning standardteckensnitt. Detta innebär att om teckensnittet inte anges i CSS på sidan, kommer standardversionen att användas. Du kan alltid använda standardteckensnitten, men de komplicerar användarnas arbete. Det är därför det är viktigt att använda ett anpassat teckensnitt. Om ditt tema inte ger dig alternativ för att ändra teckensnitt kan många webbplatser och verktyg hjälpa till.

Google-teckensnittalternativ

Var hittar du anpassade teckensnitt

Många av er vet om gratis Google-teckensnitt. Det finns många fler webbplatser där du kan hitta vackra teckensnitt. Vissa av dem är gratis för personligt bruk. Om du behöver för kommersiellt bruk behöver du en licens. Google-teckensnitt och Adobe Edge-teckensnitt är gratis. Det är därför de inte är så unika. Och detta passar inte oss.

Här är några andra resurser för att hitta teckensnitt för gratis och kommersiellt bruk:

  1. Template – På webbplatsen TemplateMonster Marketplace hittar du allt för webbdesign du behöver. Det finns också många teckensnitt och teckensnittpaket för personligt bruk till ett lågt pris. De presenteras också på ONE webbutvecklingspaket. Samlingen är enorm och kreativ. För att hjälpa dig att välja, alla teckensnitt som presenteras på broschyrer eller ramar. Varje teckensnitt presenteras också med en kommersiell licens.
  2. MyFonts – MyFonts erbjuder för närvarande det största urvalet av teckensnitt i världen. Priserna här ligger dock också i det högre segmentet. Så om du har en stram budget kanske det inte är för dig.
  3. FontSpring – Fonttspring säljer snygga teckensnitt för kommersiellt bruk. Men i nästan vilken familj som helst 1-2 gratis teckensnitt som kan användas för personliga ändamål. Dessutom finns det ett separat avsnitt med gratis typsnitt. Samlingen är vibran. Men du måste noggrant studera licensinformationen för ett visst teckensnitt innan du laddar ner det.
  4. Cufonfonts – Det är också en omfattande samling av olika teckensnitt. Välj valfri, så ser du en sida med detaljerad information om den. Det finns många gratis teckensnitt, och de är indelade i enskilda avsnitt. Sorteringssystemet på CufonFonts är ganska flexibelt och bekvämt. Webfont-support ingår också.
  5. Dafont – En annan tillgänglig samling med 3 500 gratis teckensnitt. De flesta av dem är endast avsedda för personligt bruk. En trevlig funktion DaFont är ett kategorisystem. Du kan välja teckensnitt i stil med serier, videospel, vintage eller stiliserade som japanska tecken.

Valet av teckensnitt är mycket frestande eftersom de alla är vackra. Men du ska inte välja mycket. Använda sig av inte mer än två teckensnitt på webbplatsen. Då kommer utseendet på din webbplats att vara konsekvent. När du har valt dina teckensnitt, se till att ladda ner filerna för varje stil du använder (normalt, fetstil, kursiv, etc).

Nu när du har valt lämpligt teckensnitt för webbplatsen låter vi ta reda på hur du lägger till det.

Hur man lägger till anpassade teckensnitt till WordPress

Det finns några sätt att lägga till teckensnitt på en WordPress-webbplats:

  1. plugins: i detta fall används olika WordPress-plugins för att underlätta processen.
  2. Manuellt: Med den här metoden behöver du en nedladdad typsnitt att ladda upp till webbplatsen och redigera CSS-fil.
  3. teman: Många populära teman inkluderar inbyggda alternativ för att anpassa dina teckensnitt (Observera – vi täcker inte det här alternativet eftersom processen kommer att variera baserat på det tema du använder, men högkvalitativa teman som Total WordPress-tema kommer att erbjuda online dokument som du enkelt kan följa – som den här guiden för att lägga till anpassade teckensnitt till Total)

Alternativ 1 – Byt WordPress-teckensnitt med plugins

Om vi ​​inte bryr oss om globala förändringar kan vi installera WordPress-plugins som kommer att ändra teckensnitten på din webbplats.

Egenskaper för anpassade teckensnitt plugins

Programvara med öppen källkod har en fördel för samhällets intresse, och WordPress har också denna fördel. Flera WordPress-plugins tillåter dig att lägga till anpassade teckensnitt. Hur väljer jag ett lämpligt plugin med så många? Vilka är funktionerna i anpassade teckensnitt plugins?

Här är några punkter att ta hänsyn till:

  • Möjlighet att använda anpassat teckensnitt
  • Möjlighet att använda mer än ett teckensnitt
  • Målhuvud och komponenter
  • Bonus: möjligheten att ändra teckensnittinställningar från den visuella redigeraren

Det är allt. Den första funktionen på listan är mycket viktig. Du kan alltid ladda ner teckensnitt från webbplatser som DaFont, Font Squirrel, etc., men du måste kunna ladda upp dem till WordPress.

Låt oss titta på några plugins för WordPress som låter dig ladda upp anpassade teckensnitt.

Anpassad teckensnittuppladdare

Anpassad teckensnittuppladdare

Detta plugin låter dig ladda ner Google-teckensnitt och tillämpa dem på olika delar av din blogg. Till exempel till rubrikerna eller kroppen på artikeln eller sidan.

Använd valfritt teckensnitt

Använd valfritt teckensnitt

Detta är ett WordPress-plugin som ger dig ett bekvämt gränssnitt för att ladda ner teckensnitt och använda dem direkt genom den visuella redigeraren. WordPress-visuella redigeraren kan automatiskt ändra teckensnitt för valfri text. Denna plugin erbjuder flera funktioner, vilket gör processen att lägga till anpassade teckensnitt mycket mer hanterbar.

WP Google-teckensnitt

WP Google-teckensnitt

Med WP Google-teckensnitt kan du använda Googles teckensnittskatalog. En av de fantastiska fördelarna med detta plugin är tillägget av nära 1000 Google-teckensnitt. Medan du kan ange Google-teckensnitt manuellt är det mycket lättare att använda ett plugin för de flesta användare.

Hur man installerar teckensnitt med ett plugin?

Låt oss ta till exempel WP Google-teckensnitt. Installera bara detta plugin från det officiella WordPress-arkivet och öppna avsnittet Google Font.

WP Google-teckensnitt

Här ser du en kontrollpanel från Google. Välj teckensnitt och ändra olika inställningar, till exempel teckensnittstil, element som det tillämpas på osv.

Alternativ 2 – Installera WordPress anpassade teckensnitt manuellt

Genom @ font-face-direktivet kan du ansluta både ett eller flera teckensnitt till din webbplats. Men den här metoden har sina fördelar och nackdelar.

Fördelar:

  • Genom CSS kan du ansluta teckensnitt av vilket format som helst: ttf, otf, woff, svg.
  • Teckensnittfiler finns på din server – du beror inte på tjänster från tredje part.

Nackdelar:

  • För rätt fontanslutning för varje stil måste du registrera en separat kod.
  • Utan att känna till CSS kan du lätt bli förvirrad.

Men det är inte ett riktigt problem om du kan bara kopiera en färdig kod och var du behöver ange dina värden.

Notera: Innan du börjar ska du skapa ett barntema för din webbplats. På det här sättet kan du göra alla redigeringar av ditt barntema och lämna ditt kärntema i takt så att du enkelt kan uppdatera det efter behov i framtiden.

Steg 1: Skapa en “teckensnitt” -mapp

Inom ditt barntema skapar du en ny “teckensnitt” -mapp under: wp-content / themes / ditt-barn-tema / typsnitt

Steg 2. Ladda upp de nedladdade fontfilerna till din webbplats

Detta kan göras via kontrollpanelen för din webbhotell eller via FTP.

Lägg till alla teckensnittsfiler i den nyligen tillagda teckensnittmappen: wp-content / themes / ditt-barn-tema / typsnitt du skapade.

Steg 3. Importera teckensnitt via tematypmallen

Öppna ditt barntema style.css-fil och lägg till följande kod i början av CSS-filen (efter kommentarerna till barntema):

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

Var MyWebFont är namnet på teckensnittet, och värdet på src-egenskapen (data inom parentes i citattecken) är deras plats (relativa länkar). Vi måste ange varje stil separat.

Eftersom vi först ansluter den normala stilen ställer vi in ​​egenskaperna för typsnittsvikt och typsnitt till normala.

Steg 4. När du lägger till kursiv, skriv följande:

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

Där allt är detsamma, bara vi kopplade typsnittegenskapen till kursiv.

Steg 5. Lägg till följande kod för att lägga till det djärva teckensnittet:

@ Font-face {
font-family: 'MyWebFont';
src: url ('teckensnitt / WebFont-Bold.eot');
src: url ('typsnitt / WebFont-Bold.eot? #iefix') format ('embedded-opentype'),
url ('typsnitt / WebFont-Bold.woff') format ('woff'),
url ('typsnitt / WebFont-Bold.ttf') format ('truetype'),
url ('typsnitt / WebFont-Bold.svg # svgwebfont') -format ('svg');
font-vikt: fet;
typsnitt: normal;
}

Där sätter vi egenskapen font-vikt till fetstil.

Kom ihåg att ange rätt plats för teckensnittsfilerna för varje stil.

Steg 6. För att ansluta fet stil ska du skriva ut följande:

@ Font-face {
font-family: 'MyWebFont';
src: url ('typsnitt / WebFont-Italic-Bold.eot');
src: url ('typsnitt / WebFont-Italic-Bold.eot? #iefix') format ('embedded-opentype'),
url ('typsnitt / WebFont-Italic-Bold.woff') -format ('woff'),
url-format ('typsnitt / WebFont-Italic-Bold.ttf') ('truetype'),
url ('typsnitt / WebFont-Italic-Bold.svg # svgwebfont') -format ('svg');
font-vikt: fet;
typsnitt: kursiv;
}

Det är allt �� Nu har du anslutit fyra typsnitt till din webbplats.

Men det finns en anmärkning – den här teckensnittsanslutningen visas felaktigt i Internet Explorer 8. Trösten är att det fortfarande är mycket få människor som använder IE8.

Inpackning av anpassade teckensnitt för WordPress

Vad är det första användarna märker när de besöker din webbplats? Rätt, dess design! De flesta av designen bygger på korrekt användning av vackra teckensnitt. Så du måste ta hand om teckensnittsdesignen på din webbplats. Lägg till kod eller använd ett av de plugins som nämns ovan för att bädda in en ny typsnittsstil. Vilket sätt du väljer det är upp till dig.

Se till att du inte använder mer än två teckensnitt på samma webbplats. Eftersom de mer anpassade teckensnitten du lägger till på webbplatsen, desto långsammare blir webbplatsens hastighet.

Det är allt, känn dig fri att kommentera. 

Vi kommer också gärna att höra vilket alternativ du väljer för att lägga till ett anpassat teckensnitt på din webbplats och var du hittar ditt teckensnitt.

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