SÄ hÀr lÀgger du till anpassade teckensnitt till din WordPress-webbplats (3 metoder)

SÄ hÀr lÀgger du till anpassade teckensnitt till din WordPress-webbplats (3 metoder)

Typografi Àr viktigare Àn de flesta ger det kredit för. De typsnitt du anvÀnder pÄverkar inte bara din webbplats presentation, de kan ocksÄ göra att den sticker ut frÄn andra webbplatser och gör ditt innehÄll lÀttare att lÀsa. Att vÀlja samma teckensnitt som alla andra kan vara ett sÀkert val, men det kan vara vÀrt att lÀgga till anpassade teckensnitt till WordPress.

Även om WordPress innehĂ„ller en anstĂ€ndig mĂ€ngd olika teckensnittsalternativ, finns det mĂ„nga sĂ€tt att förbĂ€ttra det valet. Om du vet hur du inkluderar anpassade teckensnitt pĂ„ din webbplats kan du vĂ€lja bland tusentals spĂ€nnande alternativ. Detta gör att du kan hitta ett teckensnitt som passar din nisch och publik.

I den hÀr artikeln ska vi prata om vad anpassade teckensnitt Àr och var du kan hitta nÄgra utmÀrkta val. Sedan gÄr vi igenom tre metoder som du kan anvÀnda för att ladda upp anpassade teckensnitt till WordPress. LÄt oss komma till det!

FörstÄ vad anpassade teckensnitt Àr (och varför du kanske vill anvÀnda dem)

Termen “anpassade teckensnitt” Ă€r ganska bred. Eftersom vi pratar om WordPress anvĂ€nder vi det dock för att hĂ€nvisa till alla typsnitt som innehĂ„llshanteringssystemet (CMS) inte innehĂ„ller ur lĂ„dan. Det finns tusentals anpassade teckensnittsalternativ som du kan hitta online, och i allmĂ€nhet hindrar ingenting dig frĂ„n att anvĂ€nda nĂ„gon av dem.

TĂ€nk dock pĂ„ – de teckensnitt du vĂ€ljer ska inte bara vara estetiskt tilltalande. De bör ocksĂ„ uppfylla nĂ„gra ytterligare kriterier:

Bortsett frÄn dessa tekniska övervÀganden, ger teckensnitt dig ett ytterligare sÀtt att uttrycka din webbplats stil. De kan bli en del av ditt varumÀrke, och med tiden kan anvÀndare komma att associera dem med din webbplats och ditt företag. SÄ du vill övervÀga dina val mycket noggrant.

DÀr du kan hitta anpassade teckensnitt för din WordPress-webbplats

Om du gör en snabb sökning efter “gratis teckensnitt” med vilken sökmotor som helst just nu, hittar du hundratals sidor med breda val att vĂ€lja mellan:

Problemet Ă€r dock att mĂ„nga av dessa “gratis teckensnittswebbplatser” inte tenderar att ha höga standarder nĂ€r det gĂ€ller att kurera deras val. Du kanske kan hitta nĂ„gra juveler, men i mĂ„nga fall kommer de ocksĂ„ att vara fulla av teckensnitt som du inte skulle fĂ„ngas död med, Ă€ven om du arbetade med en 2005 MySpace-profil.

Lyckligtvis finns det mÄnga utmÀrkta teckensnittsförvar som gÄr mycket för att samla sina samlingar. En av vÄra favoriter Àr Google Fonts, som erbjuder över 900 teckensnittsfamiljer pÄ flera sprÄk, alla gratis:

Google Fonts hemsida.

Ett annat utmĂ€rkt alternativ Ă€r Adobe Fonts) som ger över 1700 typsnittsfamiljer att vĂ€lja mellan. TĂ€nk dock pĂ„ – för att komma Ă„t dem behöver du en Creative Cloud-prenumeration (alla nivĂ„er kommer att göra). Om du Ă€r en Adobe-anvĂ€ndare betyder det att du redan har tillgĂ„ng till hela teckensnittssamlingen:

Adobe Fonts hemsida.

Dessa tvÄ kÀllor ensamma ger dig mÄnga alternativ att vÀlja mellan. TÀnk pÄ nÀr du vÀljer att varje typsnitt du vÀljer ska passa in i resten av webbplatsens stil och vara lÀttlÀst. NÀr du vÀl har hittat nÄgra typsnitt du gillar Àr allt som ÄterstÄr att lÀgga till dem pÄ din webbplats.

SÄ hÀr lÀgger du till anpassade teckensnitt till din WordPress-webbplats (tre metoder)

NÀr det gÀller anpassade teckensnitt ger WordPress dig flera sÀtt att implementera de alternativ du vill ha. LÄt oss gÄ igenom vad var och en innebÀr, sÄ att du kan vÀlja den metod som fungerar bÀst för dig.

1. Redigera temat filen

Om du inte vill ladda upp teckensnittsfiler till din webbplats manuellt kan du alltid “importera” dem frĂ„n tredjepartsförvar. Med Google-teckensnitt kan du till exempel öppna vilken typsnitt du vill ha och klicka pĂ„ VĂ€lj det hĂ€r teckensnittet högst upp pĂ„ skĂ€rmen:

Hur man laddar ner ny typografi

NÀr du har gjort det kommer en ny meny att visas som innehÄller tvÄ kodavsnitt. Den första ska se ut sÄ hÀr:

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

Den hÀr koden ska placeras i -taggarna för ditt barns temat header.php-fil. Du hittar det i ditt temas mapp i katalogen public_html / wp-content / teman.

Med den raden ber du WordPress att importera det alternativ du valt frÄn Google Fonts. För att kunna anvÀnda det mÄste du dock öppna ditt barns temat stilmall och ange vilka element som ska dra nytta av ditt nya teckensnitt. HÀr Àr hur den koden ska se ut:

font-family: 'Roboto', sans-serif;

Kom ihÄg att ditt barns temas stilark ska finnas i samma katalog som dess header.php-fil. Det betyder att du kan ta hand om bÄda uppgifterna pÄ samma plats och implementera nya teckensnitt pÄ bara nÄgra minuter.

2. Ladda upp din teckensnittsfil till ditt temas mapp

Om du handlar om prestandaoptimering kan uppladdning av teckensnittsfiler direkt till din webbplats göra det möjligt för dig att raka nÄgra millisekunder av dina laddningstider. Det första du naturligtvis behöver Àr teckensnittsfilen du vill ladda upp till din server:

Exempel pÄ teckensnittsfiler.

Eftersom WordPress inte innehÄller en sÀrskild typsnittsmapp, vill du skapa en med din pÄlitliga FTP-klient. Du kan lÀgga till mappen var du vill, men vi rekommenderar att du placerar den i din temakatalog sÄ att du kan hÄlla reda pÄ den. StÀll in det nu och ladda upp din teckensnittsfil till den nya mappen:

StÀlla in en dedikerad mapp i WordPress.

NÀr filen Àr pÄ plats öppnar du ditt barns temat stilark. Nu mÄste du anropa det teckensnittet sÄ att du kan anvÀnda det via ett utdrag som ska se ut sÄ hÀr:

@font-face {
font-family: New Font;
src: url(https://www.yourwebsite.com/wp-content/themes//fonts/your-new-font.ttf);
font-weight: normal;
}

Observera att teckensnittsnamnet och webbadressen ovan Àr platshÄllare, som du mÄste ersÀtta med rÀtt information.

NÀr du har angett den hÀr koden, stÀng inte temat stilformat Ànnu. Du mÄste fortfarande konfigurera vilka element som kommer att anvÀnda det nya teckensnittet, med lite kod som Àr mycket lik vad vi tittade pÄ i det senaste avsnittet:

.h1 site-title {
font-family: "New Font", Arial, sans-serif;
}

I det hÀr exemplet konfigurerar vi vÄra H1-underrubriker för att anvÀnda det nya teckensnittet. Du kan dock ersÀtta det med nÄgot annat element du vill ha, eller flera element om du vill anvÀnda teckensnittet pÄ mer Àn ett stÀlle.

3. AnvÀnd ett plugin

Som ofta Àr det enklaste sÀttet att implementera ny funktionalitet i WordPress att installera ett plugin. NÀr det gÀller att anvÀnda anpassade teckensnitt finns det mÄnga alternativ att vÀlja mellan.

Till exempel, om du vill anvÀnda Google Fonts rekommenderar vi det passande namnet Google Fonts for WordPress-plugin. Efter att du har aktiverat det hÀr verktyget kan du vÀlja frÄn hela Google Fonts-katalogen för dina sidor och inlÀgg utan att behöva lÀgga till nÄgon kod pÄ din webbplats:

Å andra sidan, om du vill anvĂ€nda nĂ„gon teckensnittsfil och inte begrĂ€nsa dig till ett enda arkiv, Ă€r anpassade teckensnitt det verktyg du bör titta pĂ„:

Med det hÀr pluginet kan du ladda upp teckensnitt till din webbplats direkt frÄn instrumentpanelen och anvÀnda Customizer för att vÀlja var och nÀr du ska anvÀnda dem. Endera av dessa plugins gör det enkelt att lÀgga till nya anpassade teckensnitt pÄ din webbplats.

Slutsats

Om du uppmĂ€rksammar teckensnitt som webbplatser anvĂ€nder kommer du att mĂ€rka att mĂ„nga av dem hĂ„ller sig till samma fĂ„ beprövade val. Vissa teckensnitt Ă€r ganska sĂ€kra nĂ€r det gĂ€ller lĂ€sbarhet och anvĂ€ndarĂ„tkomst. Men med tusentals alternativ att vĂ€lja mellan – bĂ„de gratis och betalt – Ă€r det vĂ€rt att leta efter en som ocksĂ„ passar din webbplats stil och publik perfekt.

NÀr det gÀller hur du laddar upp anpassade teckensnitt till WordPress kan du gÄ igenom det med tre olika metoder:

    Redigera temat filen. Ladda upp teckensnittsfilen till ditt temas mapp. AnvÀnd ett WordPress-anpassat typsnitt-plugin.