Hur man lägger till anpassade teckensnitt på en WordPress-webbplats

Vill du lära dig hur man lägger till anpassade typsnitt på en WordPress-webbplats?

Varför göra din blogg tråkig genom att använda vanliga typsnitt? Låt din blogg tala om din livfulla personlighet och de ämnen du tar upp med ett brett utbud av anpassade typsnitt. Anpassade typsnitt är en cool funktion som får din blogg att se ut att föredra framför andra.

Låt möta det; vi alla älskar bloggar och webbplatser med rätt typsnitt. De dekorerar inte bara webbplatsen utan hjälper också till att locka användaren till ditt 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 Wordpress plugins specialiserade.

Och här uppstår två frågor: var man kan få anpassade typsnitt för WordPress och hur man installerar anpassade typsnitt på din hemsida.

Låt oss ta reda på.

Varför ska jag använda anpassade typsnitt?

De dagar då Times New Roman och Georgia ansågs vara de enda typsnitten för text på webbplatser är förbi. Under de senaste åren har teckensnittsutrymmet förändrats totalt med tillkomsten av typsnitt som t.ex Google Fonts och andra.

Idag finns det hundratals gratis typsnitt, informations- och utbildningshjälpmedel och designresurser tillgängliga på Internet. Till skillnad från Adobe Illustrator, Photoshop och andra klassiska appar ger WordPress dig inte full kontroll över standardteckensnitt. Endast vissa WordPress-teman väljer att stödja och använda anpassade typsnitt.

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

Vikten av att använda anpassade typsnitt

Varför ändra typsnitt, ordindrag, radavstånd, bokstavsavstånd eller teckensnittsmättnad, undrar du? Det visar dock vissa studier typografi förbättrar läsförståelsen.

Mycket beror på typsnittens konstruktion. På en medveten och undermedveten nivå – alla utvärderar innehållet på en webbsida genom design.

Teckensnittsdesign påverkar läsarna, även om de inte uppmärksammar det. Att ge upp teckensnittsdesign innebär att ge upp utvecklingen i sig! Läsarens humör beror på det. Typsnittet gör det lättare att läsa eller tvingar användare att lämna sidan.

Alla webbläsare inkluderar en uppsättning standardteckensnitt. Det betyder att om typsnittet inte är specificerat i sidans CSS kommer standardversionen att användas. Du kan fortfarande använda standardteckensnitten, men de gör det svårare för användarna. Det är därför det är viktigt att använda ett anpassat typsnitt. Om ditt WordPress-tema inte ger dig alternativ för att ändra typsnittet, finns det massor av webbplatser och verktyg som kan hjälpa.

Alternativ för Google Fonts

Många av er känner till Google-teckensnitt. Det finns många fler webbplatser där du kan hitta vackra typsnitt. Vissa av dem är gratis för personligt bruk. Om du behöver kommersiell användning behöver du en licens. Google Fonts och Adobe Edge Fonts är gratis. Det är därför de inte är så unika.

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

1. Template — På webbplatsen TemplateMonster 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, För att hjälpa dig att välja, presenteras alla typsnitt på broschyrer eller ramar. Varje typsnitt presenteras också med en kommersiell licens.
2. MyFonts — MyFonts erbjuder för närvarande det största urvalet av typsnitt i världen. Priserna här ligger dock även i det övre segmentet. Så om du har en stram budget kanske det inte är något för dig.
3. FontSpring — Fontspring säljer nya typsnitt för kommersiellt bruk. Men i nästan varje familj kan 1-2 gratis typsnitt användas för personliga ändamål. Det finns också en separat sektion med gratis typsnitt. Samlingen är levande. Men du måste noggrant studera licensinformationen för ett visst typsnitt innan du laddar ner.
4. Cufonfonter — Det är också en enorm samling av olika typsnitt. Välj vilken som helst och du kommer att se en sida med detaljerad information om den. Det finns gott om gratis typsnitt, och de är indelade i enskilda sektioner. Sorteringssystemet på CufonFonts är ganska flexibelt och bekvämt. Webfont-stöd ingår också.
5. Dafont — Ytterligare en tillgänglig samling med 3 500 gratis typsnitt. De flesta av dem är endast utformade för personligt bruk. En cool DaFont-funktion är ett kategorisystem. Du kan välja typsnitt i stil med serier, tv-spel, vintage etc….

Valet av typsnitt är väldigt frestande eftersom de alla är vackra. Men man ska inte välja mycket. Använd inte mer än två teckensnitt på en webbplats webb. Sedanutseendet på din webbplats kommer att vara konsekvent. När du har valt dina teckensnitt, se till att ladda upp filerna för varje stil du kommer att använda (vanlig, fet, kursiv, etc.).

Nu när du har valt rätt typsnitt för din webbplats, låt oss ta reda på 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:

1. Insticksprogram : i det här fallet annorlunda Wordpress plugins används för att underlätta processen.
2. manuellt : med den här metoden behöver du ett teckensnitt som laddas ner från webbplatsen och ändra CSS-filen.
3. Teman: Många populära teman har inbyggda alternativ för att anpassa dina typsnitt (observera att vi inte täcker detta alternativ eftersom processen kommer att variera beroende på vilket tema du använder.

Alternativ 1 – Ändra WordPress-teckensnitt med plugins

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

Funktioner i Custom Font Plugins

Programvara med öppen källkod har en fördel för samhällets intresse, och WordPress har också den fördelen. Flera WordPress-plugins låter dig lägga till anpassade typsnitt. Hur väljer man en lämplig plugin när det finns så många? Vilka funktioner har WordPress-plugins för anpassade teckensnitt?

Här är några punkter att tänka på:

• Möjlighet att använda ett anpassat typsnitt
• Möjlighet att använda flera typsnitt
• Rubriker och målkomponenter
• Bonus: möjligheten att ändra teckensnittsinställningar från den visuella redigeraren

Det är allt. Den första egenskapen i listan är mycket viktig. Du kan fortfarande ladda ner typsnitt 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 typsnitt.

1. Bättre fantastiskt teckensnitt

Detta WordPress-plugin tillåter sina användare att automatiskt kombinera den senaste versionen av Better Font Awesome-typsnitt med CSS, kortkoder och mer. Dessutom uppdateras detta WordPress-plugin automatiskt.

Du hittar som funktioner: regelbundna uppdateringar, en kortkodgenerator, kompatibilitet med andra WordPress-plugins, etc ...

Ladda ner | demo | webbhotell

2. Google-teckensnitt för WordPress

Detta WordPress-plugin består av 877 specialteckensnitt som gör att du kan använda alla typsnitt på dina WordPress-webbplatser. Tack vare sin förhandsvisning i realtid kan du se hur din webbplats kommer att se ut när teckensnittet används. 

Dessutom kan du spara det och redigera det på frontend när du hittar den kombination du kommer att njuta av.

Dess funktioner inkluderar: en förhandsvisning i realtid, a ganska avancerad SEO, flerspråkig support, stöd för mer 870 + Google-teckensnitt, enkla uppdateringar och mer.

Ladda ner | demo | webbhotell

3. Fonts Plugin

Fonts Plugin är ett gratis WordPress-plugin som låter användare komma åt biblioteken Google Fonts och Adobe Fonts. Med detta WordPress-plugin kan du välja bland över 1000 Google- och Adobe-teckensnitt, använda flera typsnitt på din webbplats och testa olika alternativ med pluginens förhandsgranskningsfunktion i realtid i WordPress-anpassaren.

För fler sätt att anpassa din webbplatstypografi som teckenstorlek, bokstavsavstånd och radhöjd, kan du uppgradera till premiumversionen, Fonts Plugin Pro.Ladda ner | demo | webbhotell

4. Enkel Google Fonts

Easy Google Fonts är en av bästa WordPress-plugins för att anpassa typografin på din webbplats. Precis som Fonts Plugin låter den dig välja bland hundratals Google Fonts och förhandsgranska dem i Customizer innan du lägger till dem på din webbplats.

Även om det ger tillgång till ett mindre antal Google Fonts, är det unikt genom att det låter dig skapa anpassade teckensnittskontroller och regler i administratörsområdet, som omedelbart visas i WordPress-anpassaren.

Ladda ner | demo | webbhotell

Alternativ 2 – Installera anpassade WordPress-teckensnitt manuellt

Genom att använda @font-face-direktivet kan du koppla ett eller flera typsnitt till din webbplats. Men denna metod har sina för- och nackdelar.

fördelar:

• Tack vare CSS kan du ansluta teckensnitt i alla format: ttf, otf, woff, svg.
• Teckensnittsfiler kommer att finnas på din server – du är inte beroende av tredjepartstjänster.

nackdelar :

• För korrekt teckensnittsanslutning 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 där du behöver ange dina värden.

Remarque : Innan du börjar, se till att göra det skapa ett barntema för din webbplats. På så sätt kan du göra alla ändringar i ditt barntema och lämna ditt huvudtema så att du enkelt kan uppdatera det om det skulle behövas i framtiden.

Steg 1: Skapa en "fonts"-mapp

I ditt barntema skapar du en ny "fonts"-mapp under: wp-content/themes/ditt-barn-tema/fonter

Steg 2. Ladda upp de nedladdade teckensnittsfilerna till din webbplats

Detta kan göras via din värdkontrollpanel eller via FTP.

Lägg till alla teckensnittsfiler i den nyligen tillagda teckensnittsmappen: wp-content/themes/ Skapa en ny "fonts"-mapp i ditt barntema under: wp-content/themes/ditt-barn-tema/fonter som du skapade.

Steg 3. Importera teckensnitt via stilmall för underordnade tema

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

@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å teckensnittet och värdet på egenskapen src (data inom parentes inom citattecken) är deras plats (relativa länkar). Vi måste specificera varje stil separat.

Eftersom vi ansluter den normala stilen först, ställer vi in ​​egenskaperna för teckensnittsvikt och typsnittsstil till normal.

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

@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 allt är sig likt är vi de enda som bifogar egenskapen typsnittsstil till kursiv stil.

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

@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 fetstil.

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

Steg 6. För att ansluta fet kursiv stil, skriv följande:

@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;
}

Tja, det är det. Nu när du har kopplat fyra teckensnittsstilar till din webbplats.

Men det finns en anmärkning: den här teckensnittsanslutningen kommer inte att visas korrekt i Internet Explorer 8. Trösten är att det är väldigt få som fortfarande använder IE8.

Andra rekommenderade resurser

Vi inbjuder dig också att konsultera resurserna nedan för att gå vidare i greppet och kontrollen av din webbplats och blogg.

• 10 WordPress-dragspelsplugins för en webbplats
• Hur man lägger till flera kolumner i WordPress
• Vissa insticksprogram för att integrera Google-tjänster på din blogg
• 5 WordPress-plugins för att visa aviseringar
• Med hjälp av olika bakgrunder Wordpress

Slutsats

Vad är det första användarna lägger märke till när de besöker din webbplats? Det stämmer, dess design! Det mesta av designen bygger på korrekt användning av vackra typsnitt. Så du måste ta hand om din webbplats teckensnittsdesign. 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 webbplats. Eftersom ju fler anpassade typsnitt du lägger till på webbplatsen, desto mer kommer webbplatshastigheten att sjunka.

Det är det för den här artikeln som visar hur du lägger till anpassade typsnitt på en WordPress-webbplats. Vi inbjuder dig att prova. Om du har några funderingar eller förslag, vänligen meddela oss inom detta område commentaires.

Du kommer dock också att kunna konsultera vår medel, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.

under tiden, dela den här artikeln på dina olika sociala nätverk.   

.