Obs: I nästa ämne du kommer att läsa kommer du att lära dig om: Hur man lägger till anpassade teckensnitt på din WordPress-webbplats
Varför göra din blogg tråkig med vanliga typsnitt? Låt din blogg prata om din livfulla personlighet och de teman som den täcker med en mängd olika anpassade typsnitt. Anpassade typsnitt är en trevlig funktion som gör att din blogg ser bättre ut än andra.
Var ärlig; Vi älskar båda bloggar och webbplatser med nischade resurser. De dekorerar inte bara webbplatsen, utan hjälper också till att locka användare till dess innehåll. Valet av vanliga WordPress-teckensnitt är dock begränsat och beror på vilket tema du använder. Den goda nyheten är att du kan lägga till dem manuellt eller med dedikerade plugins.
Och här är två frågor som uppstår: var man kan få anpassade typsnitt för WordPress och Hur man installerar anpassade typsnitt på din WordPress-webbplats.
Låt oss ta reda på det tillsammans.
Varför ska jag använda anpassade typsnitt?
Dagarna går när Times New Roman och Georgia anses vara de enda källorna för webbtexter. Under de senaste åren har teckensnittsutrymmet helt förändrats med uppkomsten av typsnitt som Google Fonts och andra.
Idag finns det hundratals gratis typsnitt, informations- och utbildningshjälpmedel och resurser designade för design, tillgängliga på Internet. Till skillnad från Adobe Illustrator, Photoshop och andra klassiska appar ger WordPress dig inte full kontroll över teckensnitt som standard. Endast ett fåtal teman väljer att stödja och använda anpassade typsnitt.
Därför kommer du i det här inlägget att lära dig hur du hittar rätt anpassade typsnitt och hur du använder dem på din WordPress-webbplats.
Vikten av att använda anpassade typsnitt
Varför ändra typsnitt, indrag mellan ord, radavstånd, bokstavsavstånd eller teckensnittsmättnad? Som det kan vara, visar vissa studier det Typografi förbättrar läsförståelsen.
Mycket beror på fontänens konstruktion. På en medveten och undermedveten nivå bedömer alla en webbplats innehåll genom design.
Teckensnittsdesign påverkar läsarna, även om de inte märker det. Att ge upp teckensnittsdesign innebär att ge upp utvecklingen i sig! Läsarens humör beror på det. Teckensnitt som underlättar läsningen eller tvingar användaren att lämna sidan.
Alla webbläsare inkluderar en standarduppsättning teckensnitt. Det betyder att om typsnittet inte anges i sidans CSS kommer standardversionen att användas. Du kan alltid använda standardteckensnitten, men de komplicerar användarens arbete. Så det är viktigt att använda ett anpassat typsnitt. Om ditt tema inte ger dig alternativ för att ändra teckensnittet kan många webbplatser och verktyg hjälpa dig.
Google alternativt typsnitt
Många av er känner till gratis Google-teckensnitt. Det finns många ställen där du kan hitta snygga typsnitt. Vissa av dem är gratis för personligt bruk. Om du behöver kommersiell användning behöver du en licens. Google-teckensnitt och Adobe Edge-teckensnitt är gratis. Så de är inte unika. Och det här är inte för oss.
Här är några Fler resurser för att hitta typsnitt För gratis och kommersiellt bruk:
-
TemplateMonster – På TemplateMonster Marketplace-webbplatsen hittar du allt du behöver för webbdesign. Det finns också många typsnitt och typsnittspaket för personligt bruk för ett litet pris. Dessutom presenteras de i ETT webbutvecklingskit. Mycket stor och kreativ samling. För att hjälpa dig att välja, presenteras alla typsnitt i broschyrer eller ramar. Varje typsnitt presenteras också med en kommersiell licens.
-
MyFonts: MyFonts erbjuder för närvarande det största urvalet av typsnitt i världen. Men priserna här ligger också i det högsta segmentet. Så om du har en stram budget kanske det inte är något för dig.
-
FontSpring: Fontspring säljer eleganta typsnitt för kommersiellt bruk. Men i nästan alla hem kan 1-2 gratis typsnitt användas för personligt bruk. Det finns också en separat sektion med gratis typsnitt. Samlingen vibrerar. Men du bör noggrant undersöka licensinformationen för ett visst typsnitt innan du laddar ner det.
-
Cufonfonts: Det är också en stor samling av olika källor. Välj vilken som helst och du kommer att se en sida med detaljerad information om den. Det finns många gratis typsnitt och de är uppdelade i separata sektioner. Sorteringssystemet på CufonFonts är ganska flexibelt och bekvämt. Dessutom ingår Webfont-stöd.
-
Dafont: en annan tillgänglig samling av 3 500 gratis typsnitt. De flesta av dem är endast utformade för personligt bruk. En bra egenskap hos DaFont är ett system av kategorier. Du kan välja mellan en serietidning, ett videospel, ett klassiskt eller stiliserat typsnitt som japanska karaktärer.
Valet av typsnitt är mycket tilltalande eftersom de alla är vackra. Men du ska inte välja många. Använda sig av inte mer än två källor på webbplatsen. Då kommer utseendet och känslan på din webbplats att vara konsekvent. När du har valt typsnitt, se till att ladda ner filerna för varje stil du kommer att använda (normal, fet, kursiv, etc.).
Nu när du har valt rätt typsnitt för din webbplats, låt oss se hur du lägger till det.
Hur man lägger till anpassade teckensnitt till WordPress
Det finns flera sätt att lägga till teckensnitt på en WordPress-webbplats:
- Ytterligare– I det här fallet används olika WordPress-plugins för att underlätta processen.
- För hand: Med den här metoden måste du ladda upp det nedladdade teckensnittet till webbplatsen och redigera CSS-filen.
- Ämne– Många populära teman inkluderar inbyggda alternativ för att anpassa dina typsnitt (observera: vi kommer inte att inkludera det här alternativet eftersom processen kommer att variera beroende på vilket tema du använder, men kvalitetspremiumteman som Total WordPress-temat kommer att tillhandahållas med onlinedokumentation som du enkelt kan följa, som den här guiden för att lägga till anpassade teckensnitt till Total)
Alternativ 1: ändra WordPress-font med plugin
Om vi inte bryr oss om globala förändringar kan vi installera WordPress-plugins som kommer att ändra typsnitten på din webbplats.
Anpassade teckensnittspluginfunktioner
Programvara med öppen källkod har en fördel för samhällets intresse, och WordPress har också denna fördel. Olika WordPress-plugins låter dig lägga till anpassade typsnitt. Hur väljer man ett lämpligt tillskott för så många? Vad kännetecknar en anpassad typsnittsplugin?
Här är några punkter att notera:
- Möjlighet att använda anpassade typsnitt
- Möjlighet att använda mer än en källa.
- Mål- och huvudkomponenter
- Bonus: möjlighet att ändra teckensnittsinställningar från den visuella redigeraren
Det är allt. Den första funktionen på listan är mycket viktig. Du kan alltid ladda ner typsnitt från sajter som DaFont, Font Squirrel, etc., men du kommer att kunna ladda upp dem till WordPress.
Låt oss ta en titt på några WordPress-plugins som låter dig ladda anpassade typsnitt.
Anpassad teckensnittsladdare
Denna plugin låter dig ladda ner Google-typsnitt och tillämpa dem på olika delar av din blogg. Till exempel för rubriken eller brödtexten på inlägget eller sidan.
Använd valfritt typsnitt
Detta är ett WordPress-plugin som ger dig ett bekvämt gränssnitt för att ladda ner teckensnitt och använda dem direkt via den visuella redigeraren. WordPress visuella redigerare kan automatiskt ändra teckensnitt för vilken text som helst. Denna plugin erbjuder flera funktioner, vilket gör processen att lägga till anpassade typsnitt mycket mer lätthanterlig.
Googles WP Font
WP Google Fonts låter dig använda Google Fonts Directory. En av de fantastiska fördelarna med detta plugin är tillägget av nästan 1000 Google-teckensnitt. Även om du kan köa Google-teckensnitten manuellt, är det mycket lättare att använda plugin-programmet för de flesta användare.
Hur installerar man typsnitt med ett plugin?
Ta till exempel WP Google Fonts. Installera bara detta plugin från det officiella WordPress-förrådet och öppna avsnittet Google Fonts.
Du kommer att se panelen Google Fonts här. Välj ett teckensnitt och ändra olika inställningar som typsnittsstil, applicerade element, etc.
Alternativ 2 – Installera anpassade WordPress-teckensnitt manuellt
Genom @font-face-direktivet kan du koppla ett eller flera typsnitt till din webbplats. Men denna metod har sina för- och nackdelar.
Fördelar:
- Genom CSS kan du ansluta teckensnitt i alla format: ttf, otf, woff, svg.
- Teckensnittsfilerna kommer att finnas på din server; kommer inte att bero på tredjepartstjänster.
Defekt:
- För att matcha typsnittet korrekt för varje stil måste du registrera en separat kod.
- Utan att känna till CSS kan det vara lätt att bli förvirrad.
Men det är inte ett riktigt problem om du kan kopiera bara en ifylld kod och där du behöver definiera dina värderingar.
Notera: Innan du börjar, se till att skapa ett underordnat tema för din webbplats. På så sätt kan du göra alla redigeringar av ditt barns tema och behålla ditt kärntema intakt så att du enkelt kan uppdatera det vid behov i framtiden.
Steg 1: skapa mappen “källa”.
I ditt barns tema skapar du en ny “fonts”-mapp på: wp-innehåll / Teman / ditt-barn-tema / typsnitt
Steg 2. Ladda upp de nedladdade teckensnittsfilerna till din webbplats
Detta kan göras via din boendekontrollpanel eller via FTP.
Lägg till alla teckensnittsfiler i den nyligen tillagda teckensnittsmappen: wp-innehåll / Teman / ditt-barn-tema / typsnitt du skapade
Steg 3. Importera teckensnittet via stilmallen för barntema
Öppna ditt barntemas style.css-fil och lägg till följande kod överst i CSS-filen (efter barnets kommentar):
@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;
}
Var MyWebFont är namnet på källan, och värdet på src-attributet (data inom parentes inom dubbla citattecken) är dess position (relativ länkning). Vi måste specificera varje stil separat.
Eftersom vi ansluter den vanliga stilen för första gången ställer vi in typsnittsstilen och viktegenskaperna till normala.
Steg 4. Genom att lägga till kursiv, Skriv så här:
@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;
}
Där allt är sig likt, kursiverar vi bara egenskapen teckensnittsstil.
Steg 5. Lägg till följande kod för att lägga till fetstilta teckensnitt:
@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;
}
Där vi ställer in egenskapen font-weight till fet.
Kom ihåg att ange den exakta platsen för teckensnittsfilerna för varje stil.
Steg 6. Så här ansluter du fet och kursiv stil:
@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;
}
Ja det är det. Du har nu kopplat fyra teckensnittsstilar till din webbplats.
Men en kommentar: den här teckensnittsanslutningen kommer att visas felaktigt i Internet Explorer 8. Trösten är att det fortfarande är väldigt få som använder IE8.
Kompletta anpassade WordPress-teckensnitt
Vad är det första användarna lägger märke till när de besöker din webbplats? Ja, din design! De flesta mönster är baserade på korrekt användning av vackra typsnitt. Därför måste du ta hand om typsnittsdesignen på din webbplats. Lägg till kod eller använd en av plugins som nämns ovan för att bädda in en ny typsnittsstil. Hur du väljer det är upp till dig.
Se till att du inte använder mer än två teckensnitt på samma sida. Eftersom ju fler anpassade teckensnitt du lägger till på din webbplats, desto långsammare blir webbplatsen.
Det är det, kommentera gärna.
Vi kommer också gärna att veta vilket alternativ du väljer för att lägga till ett anpassat teckensnitt på din webbplats och var du kan hitta det.
