Tilføjelse af tilpassede skrifttyper til WordPress

/ *
Tema Navn: Tyve Sytten Barn
Tema URI: https://wordpress.org/themes/twentyseventeen/
Skabelon: twentyseventeen
Forfatter: WordPress-teamet
Forfatter URI: https://wordpress.org/
Version: 1.0

* /

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


/ * yderligere CSS går her * /

Hvis du gør det, indlæses skrifttypen på dit websted fra stilarket. Det virker som en enkel løsning, ikke? Hvorfor anbefales det så mindst??

Årsagen er præstationsproblemer. Ved brug af @importere er ikke længere den anbefalede vej at gå, fordi det forhindrer browsere i at downloade flere stilark på én gang. Konsekvensen: langsommere sideindlæsningstider. Hold dig væk fra det, hvis du kan.

2. Brug af en WordPress-skabelonfil

En anden metode til at få skrifttyperne på dit websted er at tage koden fra fontbibliotekerne og kopiere dem på din header.php skabelon fil. De fleste standard WordPress-temaer har det.

Sørg for at placere det et sted mellem og beslag. På den måde indlæses din skrifttype, når en side indlæses.

Hvis du bruger et underordnet tema, skal du huske at kopiere overordnede temaer header.php arkiveres i underkataloget for underordnede temaer og foretag ændringerne derinde.

Nogle temaer har indstillinger, der giver dig mulighed for at tilføje tilpasset kode til din header og sidefod via backend. Dette er også en bæredygtig mulighed.

3. Brug af @ Font-face

Indtil videre har vi kun talt om, hvordan man bruger brugerdefinerede skrifttyper i WordPress, der er vært et andet sted, nemlig serverne på Google og Adobe. Det er dog også muligt at være vært for skrifttyper på dit eget sted og tilbyde dem til besøgende 'browsere derfra.

For at gøre dette skal du først downloade den pågældende skrifttype. Kan du huske download-knappen på Google-skrifttyper? Den ene bliver praktisk nu. Andre udbydere lader dig også downloade skrifttyper.

Når du gør det, skal du sørge for at få det i et webskriftsformat. Det betyder TTF, OTF eller WOFF. Du finder flere oplysninger om det her. Hvis du ikke har det rigtige web fontformat, kan du også bruge denne service at konvertere din font til en understøttet en.

Når du har dine fontfiler klar, skal du uploade dem til dit WordPress-sted via FTP. Et godt sted at opbevare dem er i en undermappe af navnet på dit barn skrifttyper (kreativ, vi ved).

Derefter skal du indlæse skrifttypen i dit typografiark via @ Font-face. Sådan ser det ud:

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

Husk at udskifte navnet på skrifttypen og adressen for dets placering på dit eget sted. Derefter kan din nye brugerdefinerede skrifttype bruges.

Dette er dog heller ikke den bedste løsning, især præstationsmæssigt. Googles servere er sandsynligvis hurtigere end dit, og indlæsning af tilpassede skrifttyper derfra er sandsynligvis den bedre løsning.

4. Indtastning af skrifttyper - "WordPress Way"

Hvis du virkelig ønsker at tilføje tilpassede skrifttyper til WordPress på den rigtige måde, bruger du dine functions.php fil (inde i biblioteket for dit aktuelt aktive tema) og funktionen  wp_enqueue_script eller wp_enqueue_style.

Med deres hjælp kan vi tage de kodestykker, der leveres af skrifttypesiderne. I stedet for at kopiere dem til en fil, tilføjer vi dem imidlertid til overskriften via en funktion.

Hvad er forskellen mellem wp_enqueue_script og wp_enqueue_style? Som deres navne antyder, er det ene til at tilføje scripts, et til typografiark. Hvilken der er rigtigt at bruge afhænger af, hvordan dine brugerdefinerede skrifttyper leveres fra deres kilde.

For eksempel giver Google-skrifttyper dig skrifttyper som typografiark. I dette tilfælde tilføjede du dem til dit WordPress-sted på denne måde:

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 modsætning hertil kommer skrifttyper fra Adobe Edge Web-skrifttyper som JavaScript. Derfor, for at indspille dem på dit websted, ser koden sådan ud:

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 ikke så svært, var det? Plus, du får ekstra point for at gøre det på WordPress måde.

5. Ring til de tilpassede skrifttyper i dit stilark

Nu, når skrifttyperne er føjet til dit websted, kan du officielt bruge dem. For at gøre dette er det eneste, der er tilbage, at tilføje en erklæring for den nye skrifttype på dit typografiark. For at ændre skrifttypen til dine overskrifttags skal du f.eks. Bruge noget som dette:

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

Bemærk: Vær opmærksom på, hvordan den service, du bruger, specificerer CSS-erklæringen for dine skrifttyper. På vores testside kunne vi tilsyneladende ikke få Adobe Edge Web-skrifttyper til at fungere, fordi de kalder Open Sans i CSS med open sans i modsætning til 'Open Sans' i Google-skrifttyper.

Det er det. Du ved nu, hvordan man manuelt tilføjer tilpassede skrifttyper til WordPress. Tillykke dig selv, dette er noget næste niveau viden! Det er klart, at de samme handlinger er mulige via plugins. Det er det, vi vil tale om næste gang.

B) Sådan føjes tilpassede skrifttyper til WordPress via plugin

WordPress-sfæren ville ikke være, hvad det er, hvis der ikke var flere plugin-løsninger til at tilføje tilpassede skrifttyper til platformen. Vi vil undersøge, hvordan vi bruger Nemme Google-skrifttyper, hvilket er et af de mest populære plugins i dette område.

1. Installer pluginet

Det første trin er installation af plugin. For at gøre det skal du gå videre til Plugins> Installer nyt. Søg derefter efter plugin-navnet. Klik på i søgeresultaterne Installer nu og aktiver plugin, når det er på dit websted.

2. Tilføj / skift skrifttyper på dit websted

Når plugin er aktivt, finder du et nyt menupunkt kaldet Typografi under Udseende> Tilpas.

Når du klikker på det og vælger Standard typografi, du finder en liste over kontroller til ændring af skrifttypen på dine afsnit og overskrifter.

Det er virkelig enkelt at bruge dem. Klik bare på rullemenuen, hvor det står Rediger skrifttype for den del af dit websted, du vil ændre det til. Dette giver dig adgang til denne menu:

Her er den vigtigste del den under Skrifttype Familie. Her kan du vælge en ny skrifttype fra hele Google Font-biblioteket (brug Script / Subset for at begrænse skriftvalg til dem med specialtegn).

Skrifttyperne bestilles af standard-, serif-, sans-serif-, display-, håndskrift- og monospace-skrifttyper. Du kan imidlertid også ganske enkelt søge efter dem ved navn.

Når du klikker på en skrifttype, kan du forhåndsvise ændringerne i realtid til højre.

3. Konfigurer skrifttypen

Når du har valgt en skrifttype, er der mange muligheder for at tilpasse din typografi yderligere.

Først og fremmest kan du ændre font-vægt / stil under menuen med samme navn. Dette styrer tykkelsen på bogstaverne.

Desuden under Tekstdekoration, du er i stand til at tilføje understregning, gennemskæring og overline. Teksttransform giver dig også mulighed for at indstille det til alle kasketter, alle små eller store bogstaver. Under Udseende fanen øverst, kan du også kontrollere fontfarve, baggrundsfarve, skriftstørrelse, linjehøjde og bogstavafstand.

Endelig, Positionering lader dig ændre andre indstillinger, såsom margin, polstring, kant, grænseradius og display.

Kort sagt skal du være i stand til at tilpasse skrifttyperne på dit websted helt efter din smag. Let, er det ikke? Glem ikke at slå Gem og udgiv øverst, når du er tilfreds med dine ændringer.

Det fungerer ikke, hvad gør jeg?

Undertiden kan du ikke ændre nogle af skrifttyperne på dit websted. Det sker normalt, når det tema, du bruger kommer med ikke-standard CSS klasser og vælgere til at style dem.

For eksempel i temaet Twenty Sixteen er blogposttitler ikke kun defineret som H1, men har også en CSS-klasse kaldet .entry-title. Derfor er plugin ikke i stand til at ændre dem.

For at afhjælpe dette problem skal du oprette en såkaldt fontkontrol under Indstillinger> Google-skrifttyper.

Du kan knytte CSS-vælgere til ny kontrol og tvinge tilsidesættelse, når det er nødvendigt. Når du har gjort det, er den nye fontkontrol tilgængelig som en ekstra mulighed i WordPress Customizer under Tematypografi. Let peasy.

Andre tilpassede skrifttyper WordPress-plugins

Der er også andre WordPress-plugins tilgængelige til tilføjelse af tilpassede skrifttyper:

• Brug enhver skrifttype - Det hjælper dig med at uploade skrifttyper uden nogen CSS. Det huser skrifttyper på din egen server og tilbyder også konverteringsværktøjer til fontformater.
• Typekit-skrifttyper til WordPress - Brug skrifttyper fra Adobes Typekit service (som du skal tilmelde dig). Det giver dig mulighed for at indtaste integrerede koder og brugerdefineret CSS direkte i plugin.
• TK Google-skrifttyper - En alternativ løsning til at integrere Google-skrifttyper, der stort set flytter Google Font-oplevelsen til WordPress-backend. Prøv skrifttyper med en forhåndsvisning og tilpasset tekst, og ænd dem derefter inde i WordPress Customizer.

Hvorfor bruge brugerdefinerede skrifttyper på dit WordPress-websted?

Typografi er en videnskab i sig selv, og vi kan ikke give dig et komplet kursus i brugen af ​​skrifttyper i webdesign her. Når alt kommer til alt handler det ikke kun om skrifttypen, men også dens størrelse, skrå, tykkelse og en masse andre ting. Men vi kan dæk, hvorfor det er en god ide at bruge tilpassede skrifttyper på dit WordPress-sted.

1. Typografi er en del af det første indtryk

Først og fremmest påvirker den skrifttype, du bruger, meget af, hvordan dit websted opfattes. Er dit websted sjovt og legende? Er du erhvervsfolk? Besøgende beslutter dette inden for et øjeblik, og din typografi spiller en stor rolle i deres opfattelse.

2. Skrifttyper har meget mere indflydelse end du tror

Det kan påvirke din evne til at lære, huske tekster og endda påvirke dit humør.

For eksempel i en forskning, det blev bemærket, at hvis du vil øge den brugte tid på at læse noget tekst, skal du bruge en serif-font. Hvis du imidlertid vil læse mere på kort tid, skal du skifte til en sans-serif-font.

En anden undersøgelse viste folk de samme træningsinstruktioner i forskellige skrifttyper. De bad derefter deltagerne om at estimere, hvor lang tid det ville tage dem at udfylde de nævnte instruktioner. Fascinerende gætte dem med den mere komplekse skrifttype, det ville tage dem længere tid end gruppen med den enklere skrifttype. Som en konsekvens var de mindre tilbøjelige til at følge træningsrutinen.

Hvor finder du tilpassede skrifttyper

1. Brug Google-skrifttyper til at finde tilpasset typografi

Den første service, vi vil se på, er Google-skrifttyper. Som navnet antyder, er det en tjeneste fra Google, der tilbyder 800+ forskellige skrifttyper. Gratis at bruge. For alle.

Sådan bruges det:

2. Find den rigtige skrifttype

Når du først går til siden Google Skrifttyper (skriv det bare i Google Søgning), er det dette, du vil se:

Brugergrænsefladen er lavet til at hjælpe dig med at finde den rigtige skrifttype til dit formål. Hvis du allerede har en skrifttype i tankerne, kan du blot skrive dens navn i søgefeltet til højre.

Hvis ikke, kan du filtrere skrifttyperne på mange forskellige måder, for eksempel efter kategori:

• Serif - Betydning af skrifttyper med knuste linjer i slutningen, som Times New Roman.
• Sans serif - Enkle skrifttyper uden krøller, som Helvetica. De skrifter, der bruges på dette websted, er et eksempel på det.
• Skærm - Skrifttyper, der kan bruges i større størrelser, f.eks. Overskrifter.
• Håndskrift - Vil du have, at din typografi skal se ud, som om den var skrevet i hånden? Så er dette din indstilling.
• Monospace - Typografi, hvor alle tegn optager det samme rum, sådan her.

Andre filtre inkluderer:

• Sortering - Sorter skrifter efter trending, populær, dato tilføjet eller alfabetisk.
• Sprog -Begræns dit valg af skrifttype til sprog, der ikke er skrevet i det latinske alfabet, såsom arabisk, thai eller vietnamesisk.
• Et antal stilarter -Vælg hvor mange tilgængelige stilarter du har brug for, hvilket betyder, om en skrifttype er tilgængelig i forskellige tykkelser, kursiv, fed og mere.
• Tykkelse - Vælg den ønskede tykkelse på din skrifttype.
• Slant - Samme som tykkelse, men for skråstillingen. Det spænder fra lige til næsten vandret.
• Bredde - Filtrer skrifttyper efter bredden på deres bogstaver og afstand.

Når du anvender filtre, justeres dine søgeresultater i realtid. Til venstre ser du tilgængelige skrifttyper i din kategori og eksemplesætninger.

Når du holder musepekeren over en skrifttype, kan du bruge rullemenuerne øverst til at få Google-skrifttyper til at vise et eksempelafsnit, hele alfabetet eller talene. Du kan også blot klikke på sætningsfeltet og skrive, hvad du vil.

Derudover er der muligheder for at ændre skrifttype og størrelse. Når du foretager ændringer, får du også muligheden for at anvende dem på alle dine søgeresultater. Endelig skal du se på fontdetaljer-siden ved at klikke på Se prøve.

3. Føj skrifttyper til din samling

Hvis du kan lide en bestemt skrifttype, kan du bruge det røde plustegn i øverste højre hjørne til at føje den til din samling. Hvis du gør det, åbnes en menu nederst, hvor du ser alle dine valgte skrifttyper.

Bemærk, at du kan tilføje mere end en skrifttypefamilie. Dette giver for eksempel mening, når du vælger en til din kropskopi og en anden til overskrifter.

4. Tilpas fontindstillinger

Når du er tilfreds med din samling, skal du klikke på den nederste menu. Hvis du gør det, åbnes denne skærm:

Som du kan se, kan du finde nogle kodestykker, der skal integreres og bruge skrifttyper på dit websted. Dette bliver senere vigtigt. For nu skal du klikke på fanen, der siger Tilpas. Hvis du gør det, kommer du til denne menu:

Her er du i stand til at vælge typografierne for de pågældende skrifttyper. Dette er vigtigt, hvis du vil bruge skrifttyper i forskellige størrelser, hvilket ofte er tilfældet.

Vær dog forsigtig: Jo flere stilarter dit websted skal indlæse, jo mere vil det bremse (Google-skrifttyper giver dig endda en indikation af indlæserhastigheden for din nuværende samling øverst til højre). Så tænk over, hvad du virkelig har brug for, og vælg kun det. Der er forresten flere måder, du kan fremskynde WordPress på.

Hvis du har brug for noget andet sprog end det almindelige latinske alfabet, skal du sørge for at vælge det også i bunden.

Derudover er alt hvad du behøver at vide de to pilikoner øverst.

Den til venstre giver dig mulighed for at forhåndsvise og dele din skriftsamling. Når du vælger at gøre det, åbnes det en udvidet side, hvor du kan indsætte eksempeltekst og se den i alle skrifttyper på én gang. Denne side er også god at dele med folk.

Mere vigtigt er download-knappen ved siden af. Ved at klikke på den kan du downloade fontfilerne til at bruge dem på din stationære maskine (for eksempel i Photoshop). Brug Skyfonts for at holde dem ajour.

Senere vil vi også vise dig en måde at uploade disse filer til din server og værtsskrifttyper direkte på dit websted. Husk dette i fremtiden. Foreløbigt vil vi vise dig et andet, lignende fontbibliotek.

Yderligere kilde til brugerdefinerede skrifttyper

• 15+ websikre skrifttyper, vi anbefaler

Med ovenstående skulle du være i stand til at finde noget for dig selv. Et sidste tip - hvis du ikke ved, hvordan du kombinerer skrifttyper korrekt, skal du bruge Skrifttypepar hvor designere har gjort benarbejdet for dig.

Jeffrey Wilson Administrator

Sorry! The Author has not filled his profile.

follow me