Lägga till anpassade teckensnitt till WordPress


Hur du lägger till anpassade teckensnitt till WordPress


Att välja rätt teckensnitt för din WordPress-webbplats är en central del av webbdesign och webbplatsmärke.

Som färger, bilder och andra element, typografi spelar en stor roll i hur din webbplats uppfattas av besökare.

Tack och lov är WordPress-teckensnitt en av de många saker du fritt kan anpassa. Du kan använda nästan alla gratis anpassade teckensnitt på din WordPress-webbplats du vill ha.

Vi täcker allt du behöver veta om WordPress-teckensnitt:

  • A) Hur man lägger till anpassade teckensnitt till WordPress (manuellt)
  • B) Hur man lägger till anpassade teckensnitt till WordPress (via plugin)
  • Varför använda anpassade teckensnitt på WordPress
  • Var hittar du anpassade teckensnitt
  • Slutsats

A) Hur man lägger till anpassade teckensnitt manuellt till WordPress

När det gäller att lägga till anpassade teckensnitt till WordPress för hand har du tre huvudalternativ: HTML, JavaScript och CSS. Det finns för- och nackdelar med varje metod och vilken som är rätt för dig beror på din installation. Oroa dig inte, vi kommer att gå igenom var och en av dem i detalj.

1. Använda CSS och @importera

Låt oss börja med den minst rekommenderade metoden. Om du planerar att installera anpassade typsnitt från Google-teckensnitt kanske du har märkt att det har en flik märkt @importera. Tjänsten ger dig en bit CSS-kod.

importfliken i Google-teckensnitt

Du kan antingen ta det som det är och sätta in det i din rubrik (mer om det nedan) eller kopiera det utan >parentes till början av ditt temas (eller ännu bättre, barntema) style.css fil.

/ *
Temanamn: tjugo sjutton barn
Tema URI: https://wordpress.org/themes/twentyseventeen/
Mall: twentyseventeen
Författare: WordPress-teamet
Författare URI: https://wordpress.org/
Version: 1.0

* /

@import url ('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');


/ * ytterligare CSS går här * /

Om du gör det laddas teckensnittet på din webbplats från mallen. Det verkar som en enkel lösning, eller hur? Varför är det då minst rekommenderat?

Anledningen är prestandafrågor. Använder sig av @importera är inte längre det rekommenderade sättet att gå eftersom det hindrar webbläsare från att ladda ner flera stilark på en gång. Konsekvensen: långsammare laddningstider för sidor. Håll dig borta från det om du kan.

2. Använda en WordPress-mallfil

En andra metod för att få teckensnitten på din webbplats är att ta koden från teckensnittsbiblioteken och kopiera dem i din header.php mallfil. De flesta WordPress-teman har det.

Se till att placera den någonstans mellan och parentes. På så sätt kommer ditt teckensnitt att laddas när en sida laddas.

mata in Googles typsnittkod i wordpresshuvud

Om du använder ett barn-tema, se till att kopiera överordnade temat header.php arkivera i katalogen för barntema och gör ändringarna där.

Vissa teman har inställningar som gör att du kan lägga till anpassad kod i din sidhuvud och sidfot via backend. Detta är också ett genomförbart alternativ.

3. Använd @ Font-face

Hittills har vi bara pratat om hur man använder anpassade teckensnitt i WordPress som är värd någon annanstans, nämligen servrarna på Google och Adobe. Det är dock också möjligt att vara värd för teckensnitt på din egen webbplats och erbjuda dem till besökarnas webbläsare därifrån.

För att göra detta måste du först ladda ner det aktuella teckensnittet. Kommer du ihåg nedladdningsknappen på Google-teckensnitt? Den kommer att bli praktisk nu. Andra leverantörer låter dig också ladda ner teckensnitt.

När du gör det, se till att du får det i ett webbformatformat. Det betyder TTF, OTF eller WOFF. Du hittar mer information om det här. Om du inte har rätt webbformat kan du också använda det denna tjänst för att konvertera ditt teckensnitt till ett stöd.

När du har dina fontfiler redo måste du ladda upp dem till din WordPress-webbplats via FTP. Ett bra ställe att lagra dem är i en underkatalog med namnet på ditt barn typsnitt (kreativ, vi vet).

Efter det måste du ladda teckensnittet i ditt formatmall via @ Font-face. Så här ser det ut:

@ font-face {
font-family: Roboto;
src: url (http: //localhost/wordpress/wp-content/themes/twentyseventeen-child/fonts/Roboto-Regular.ttf);
font-vikt: normal;
}

Kom ihåg att byta namn på typsnitt och adress för dess plats på din egen webbplats. Därefter kan ditt nya anpassade teckensnitt användas.

Men detta är inte heller den bästa lösningen, särskilt prestationsmässigt. Googles servrar är förmodligen snabbare än dina och därför är det troligtvis den bättre lösningen att ladda anpassade teckensnitt därifrån.

4. Att ange typsnitt - "WordPress Way"

Om du verkligen vill lägga till anpassade teckensnitt till WordPress på rätt sätt använder du dina functions.php fil (inuti katalogen för ditt för närvarande aktiva tema) och funktionen  wp_enqueue_script eller wp_enqueue_style.

Med deras hjälp kan vi ta kodavsnitten från teckensnittssidorna. I stället för att kopiera dem till en fil, lägger vi dem till rubriken via en funktion.

Vad är skillnaden mellan wp_enqueue_script och wp_enqueue_style? Som deras namn antyder är ett för att lägga till skript, ett för stilark. Vilken som är rätt att använda beror på hur dina anpassade teckensnitt tillhandahålls från deras källa.

Till exempel ger Google-teckensnitt dig teckensnitt som mallar. I så fall lägger du till dem på din WordPress-webbplats på detta sätt:

funktion add_google_fonts () {
wp_enqueue_style ('google_web_fonts', 'https://fonts.googleapis.com/css?family=Open+Sans|Roboto');
}

add_action ('wp_enqueue_scripts', 'add_google_fonts');

I motsats till detta kommer teckensnitt från Adobe Edge Web Fonts som JavaScript. Därför, för att förlägga dem på din webbplats, skulle koden se ut så här:

funktion add_adobe_fonts () {
wp_enqueue_script ('adobe_edge_web_fonts', '//use.edgefonts.net/open-sans.js');
}

add_action ('wp_enqueue_scripts', 'add_adobe_fonts');

Var det inte så svårt, eller hur? Dessutom får du extra poäng för att göra det på WordPress-sättet.

5. Ring anpassade teckensnitt i ditt stilark

Nu när teckensnitten har lagts till på din webbplats kan du använda dem officiellt. För att göra det, återstår bara att lägga till en deklaration för det nya teckensnittet i ditt formatmall. Om du till exempel vill ändra teckensnitt för dina rubriktaggar använder du något liknande:

h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Roboto';
}

Notera: Var uppmärksam på hur tjänsten du använder anger CSS-deklarationen för dina teckensnitt. På vår testsida kunde vi till synes inte få Adobe Edge Web Fonts att fungera eftersom de kallar Open Sans i CSS med öppna-sans i motsats till "Open Sans" i Google-teckensnitt.

Det är allt. Du vet nu hur man lägger till anpassade teckensnitt manuellt till WordPress. Grattis själv, det här är lite kunskap på nästa nivå! Uppenbarligen är samma åtgärder möjliga via plugins. Det är vad vi kommer att prata om nästa.

B) Hur lägger du till anpassade teckensnitt till WordPress via plugin

WordPress-sfären skulle inte vara vad det är om det inte finns flera plugin-lösningar för att lägga till anpassade teckensnitt till plattformen. Vi kommer att gå igenom hur du använder Enkla Google-teckensnitt, vilket är en av de mest populära pluginsna i detta område.

1. Installera plugin-programmet

Det första steget är att installera plugin-programmet. För att göra det, gå vidare till Plugins> Installera nytt. Sök sedan efter plugin-namnet. Klicka på i sökresultaten Installera nu och aktivera plugin-programmet när det är på din webbplats.

2. Lägg till / ändra typsnitt på din webbplats

När plugin är aktivt hittar du ett nytt menyalternativ som heter Typografi under Utseende> Anpassa.

typografimeny i wordpress customizer

När du klickar på den och väljer Standard typografi, hittar du en lista över kontroller för att ändra teckensnitt för dina stycken och rubriker.

enkla inställningar för Google-teckensnitt i wordpress customizer

Att använda dem är väldigt enkelt. Klicka bara på rullgardinsmenyn där det står Redigera typsnitt för den del av din webbplats du vill ändra den för. Detta ger dig tillgång till den här menyn:

enkla Google-teckensnitt ändra teckensnitt

Här är den viktigaste delen den under Typsnittsfamilj. Här kan du välja en ny typsnitt från hela Google Font-biblioteket (använd Script / Subset för att begränsa teckensnittsval till de med specialtecken).

Teckensnitten beställs av standard-, serif-, sans-serif-, display-, handskrift- och monospace-teckensnitt. Du kan emellertid också helt enkelt söka efter dem med namn.

När du klickar på ett teckensnitt kan du förhandsgranska ändringarna i realtid till höger.

ändrade anpassade teckensnitt i enkla Google-teckensnitt

3. Konfigurera teckensnittet

När du har valt ett teckensnitt finns det många alternativ att anpassa din typografi vidare.

Först och främst kan du ändra typsnittets vikt / stil under menyn med samma namn. Detta styr bokstävernas tjocklek.

Dessutom under Textdekoration, du kan lägga till understruk, genomsträckt och överlinje. Textomvandling låter dig också ställa in den på alla kepsar, alla små bokstäver eller bokstäver varje första bokstav. Under Utseende på toppen, kan du också kontrollera teckensnittsfärg, bakgrundsfärg, teckenstorlek, radhöjd och bokstavsavstånd.

utseendeinställningar i enkla google-teckensnitt

Till sist, positionering låter dig ändra andra inställningar som marginal, stoppning, kantlinje, gränseradius och display.

positioneringsinställningar i enkla Google-teckensnitt

Kort sagt, du bör kunna anpassa teckensnitten på din webbplats helt efter din smak. Lätt, är det inte? Glöm inte att slå Spara & publicera överst när du är nöjd med dina förändringar.

Det fungerar inte, vad gör jag?

Ibland kan du inte ändra några typsnitt på din webbplats. Det händer vanligtvis när temat du använder kommer med icke-standardiserade CSS-klasser och väljare för att utforma dem.

Till exempel, i tjugo sexton-temat, är blogginläggstitlar inte bara definierade som H1 utan har också en CSS-klass som heter .entry-titel. Av den anledningen kan inte plugin-programmet ändra dem.

För att åtgärda detta problem måste du skapa en så kallad teckensnitt kontroll under Inställningar> Google-teckensnitt.

lägg till teckensnittskontroll i enkla Google-teckensnitt

Du kan koppla CSS-väljare till ny kontroll och tvinga åsidosättande vid behov. När du har gjort det är den nya fontkontrollen tillgänglig som ett extra alternativ i WordPress Customizer under Tematypografi. Lätt som en plätt.

Andra anpassade typsnitt WordPress Plugins

Det finns också andra WordPress-plugins för att lägga till anpassade teckensnitt:

  • Använd valfritt teckensnitt - Det hjälper dig att använda uppladdade teckensnitt utan CSS. Den innehåller typsnitt på din egen server och erbjuder också konverteringsverktyg för teckensnittformat.
  • Typekit typsnitt för WordPress - Använd teckensnitt från Adobes Typekit service (som du behöver registrera dig för). Det gör att du kan mata in inbäddningskoder och anpassad CSS direkt i plugin.
  • TK Google-teckensnitt - En alternativ lösning för att bädda in Google-teckensnitt som ganska mycket flyttar upplevelsen av Google-teckensnitt till WordPress-backend. Testa teckensnitt med förhandsgranskning och anpassad text och ändra dem sedan inuti WordPress Customizer.

Varför använda anpassade teckensnitt på din WordPress-webbplats?

Typografi är en vetenskap i sig och vi kan inte ge dig en fullständig kurs om användning av typsnitt i webbdesign här. När allt handlar det inte bara om teckensnittet utan också dess storlek, sned, tjocklek och många andra saker. Men vi kan täcka varför det är bra att använda anpassade teckensnitt på din WordPress-webbplats.

1. Typografi är en del av det första intrycket

Först och främst påverkar det teckensnitt du använder mycket av hur din webbplats uppfattas. Är din webbplats rolig och lekfull? Är du affärspersonal? Besökare bestämmer detta inom en blick och din typografi spelar en stor roll i deras uppfattning.

2. Teckensnitt har mycket mer påverkan än du tror

Det kan påverka din förmåga att lära, memorera texter och till och med påverka ditt humör.

Till exempel i en forskning, Det noterades att om du vill öka tiden för att läsa lite text, bör du använda ett serif-teckensnitt. Men om du vill läsa mer på kort tid bör du byta till ett sans-serif-teckensnitt.

En annan studie visade människor samma träningsinstruktioner i olika typsnitt. De bad sedan deltagarna att uppskatta hur lång tid det skulle ta dem att fylla i nämnda instruktioner. Fascinerande, de med det mer komplexa teckensnittet gissade att det skulle ta dem längre tid än gruppen med det enklare teckensnittet. Som en följd av det var de mindre benägna att följa träningsrutinen.

Var hittar du anpassade teckensnitt

1. Använd Google-teckensnitt för att hitta anpassad typografi

Den första tjänsten vi kommer att titta på är Google-teckensnitt. Som namnet antyder är det en tjänst från Google som erbjuder 800+ olika teckensnitt. Gratis att använda. För alla.

Så här använder du det:

2. Hitta rätt teckensnitt

När du först går till Google-teckensnittssidan (skriv bara in det i Google-sökning) är det detta du kommer att se:

hur man lägger till anpassade teckensnitt på wordpress google teckensnitt hemsida

Användargränssnittet är skapat för att hjälpa dig hitta rätt teckensnitt för ditt syfte. Om du redan har ett teckensnitt i åtanke kan du helt enkelt skriva in dess namn i sökfältet till höger.

Om inte, kan du filtrera teckensnitten på många olika sätt, till exempel efter kategori:

  • serif - Betydelse av teckensnitt med snodiga linjer i slutet, som Times New Roman.
  • Sans serif - Enkla teckensnitt utan squiggles, som Helvetica. De teckensnitt som används på denna webbplats är ett exempel på det.
  • Visa - Typsnitt som kan användas i större storlekar, t.ex. rubriker.
  • Handstil - Vill du att din typografi ska se ut som den var skriven för hand? Då är detta din inställning.
  • Monospace - Typografi där alla karaktärer upptar samma utrymme, så här.

Andra filter inkluderar:

  • Sortering - Sortera teckensnitt efter trendande, populära, datum tillagda eller alfabetiskt.
  • språk -Begränsa ditt val av teckensnitt till språk som inte är skrivna i det latinska alfabetet som arabiska, thailändska eller vietnamesiska.
  • Ett antal stilar -Välj hur många tillgängliga stilar du behöver, vilket betyder om ett teckensnitt är tillgängligt i olika tjocklekar, kursiv, fetstil och mer.
  • Tjocklek - Välj önskad tjocklek på ditt teckensnitt.
  • Luta - Samma som tjocklek men för lutningen. Det sträcker sig från rakt till nästan horisontellt.
  • Bredd - Filtrera teckensnitt efter bredden på deras bokstäver och avstånd.

När du tillämpar några filter justeras dina sökresultat i realtid. Till vänster ser du tillgängliga teckensnitt i din kategori och exempelmeningar.

När du håller muspekaren över ett teckensnitt kan du använda rullgardinsmenyerna längst upp för att låta Google-teckensnitt visa ett exempel, hela alfabetet eller siffrorna. Du kan också helt enkelt klicka på meningsfältet och skriva vad du vill.

redigera exempeltext i google-teckensnitt

Utöver detta finns det alternativ för att ändra typsnitt och storlek. När du gör ändringar får du också möjligheten att tillämpa dem på alla dina sökresultat. Slutligen tittar du på sidan för teckensnittdetaljer genom att klicka Se prov.

typsnitt för teckensnitt i Google-teckensnitt

3. Lägg till teckensnitt i din samling

Om du gillar ett visst teckensnitt kan du använda det röda plustecknet i det övre högra hörnet för att lägga till det i din samling. Om du gör det öppnar du en meny längst ner där du ser alla dina valda teckensnitt.

teckensnitt valda i Google-teckensnitt

Observera att du kan lägga till mer än en typsnittsfamilj. Det här är meningsfullt, till exempel när du väljer en för din kroppskopia och en annan för rubriker.

4. Anpassa teckensnittinställningar

När du är nöjd med din samling klickar du på den nedre menyn. Om du gör det öppnas den här skärmen:

teckensnittinställningar i google teckensnitt

Som du ser kan du hitta några kodkoder för att bädda in och använda teckensnitt på din webbplats. Detta kommer att bli viktigt senare. För nu, klicka på fliken som säger Anpassa. Om du gör det tar du dig till den här menyn:

anpassa teckensnitt i Google-teckensnitt

Här kan du välja stilar för de aktuella teckensnitten. Detta är viktigt om du vill använda teckensnitt i olika storlekar, vilket ofta är fallet.

Var dock försiktig: ju fler stilar din webbplats måste ladda, desto mer kommer den att sakta ner (Google-teckensnitt ger dig till och med en indikation på laddningshastigheten för din nuvarande samling längst upp till höger). Så tänk på vad du verkligen behöver och välj bara det. Förresten, det finns fler sätt du kan påskynda WordPress.

Om du behöver något annat språk än det vanliga latinska alfabetet måste du också välja det längst ner.

välj teckenspråk i Google-teckensnitt

Dessutom är allt du behöver veta de två pilikonerna överst.

ladda ner och dela knappen i Google-teckensnitt

Den till vänster låter dig förhandsgranska och dela din fontsamling. När du väljer att göra det öppnar det en utökad sida där du kan infoga exempeltext och se den i alla teckensnitt samtidigt. Den här sidan är också bra att dela med människor.

Viktigare är nedladdningsknappen bredvid. Genom att klicka på den kan du ladda ner teckensnittsfilerna för att använda dem på din stationära maskin (till exempel i Photoshop). Använda sig av Skyfonts för att hålla dem uppdaterade.

Senare kommer vi också att visa dig ett sätt att ladda upp dessa filer till din server och värd typsnitt direkt på din webbplats. Håll detta i åtanke för framtiden. För tillfället kommer vi att visa dig ett andra, liknande teckensnittbibliotek.

Ytterligare källa för anpassade teckensnitt

  • 15+ webbsäkra typsnitt vi rekommenderar

Med ovanstående bör du kunna hitta något själv. Ett sista tips - om du inte vet hur du ska kombinera teckensnitt på rätt sätt, använd Font Pair där designers har gjort benarbeten för dig.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me