Slik legger du til egendefinerte fonter i WordPress

Vil du legge til egendefinerte skrifter i WordPress? Egendefinerte skrifter kan hjelpe deg med å friske opp temaet ditt og skille seg ut. I denne artikkelen vil vi vise deg hvordan du legger til tilpassede skrifter i WordPress ved hjelp av Google Fonts, TypeKit og CSS3 @ Font-Face-metode.

Bruk av egendefinerte skrifter i WordPress-temaer har blitt en felles trend. Faktisk er det noen temaer som kommer fullt lastet med hundrevis av tilpassede skrifter. Men lasting for mange skrifter kan redusere nettstedet ditt. Det er derfor vi skal vise deg hvordan du skal laste inn egendefinerte skrifter, slik at det ikke senker nettstedet ditt.

Men før vi ser på hvordan du legger til egendefinerte skrifter i WordPress, kan vi se på å finne tilpassede skrifter.

Slik finner du egendefinerte skrifttyper som skal brukes i WordPress

Fonter pleide å være dyre, men ikke mer. Det er mange steder å finne gode gratis webfonter som Google Fonts, Typekit, FontSquirrel og fonts.com.

Hvis du ikke vet hvordan du skal blande og matche skrifttyper, kan du prøve Font Pair. Det hjelper designere sammen flotte Google-skrifter sammen.

Når du plukker skrifter, husk at bruk av for mange tilpassede skrifter vil redusere nettstedet ditt. Det er derfor du bør velge to skrifter og bruke dem gjennom hele designet. Dette vil også gi konsistens til ditt design.

Videoopplæring

Hvis du ikke liker videoen eller trenger mer instruksjoner, fortsett å lese.

Legge til egendefinerte skrifttyper i WordPress fra Google Fonts

Google Fonts er det største, gratis og mest brukte fontbiblioteket blant nettstedutviklere. Det finnes flere måter du kan legge til og bruke Google Fonts i WordPress.

Metode 1: Legge til egendefinerte fonter ved hjelp av Easy Google Fonts Plugin

Hvis du vil legge til og bruke Google Fonts på nettstedet ditt, er denne metoden uten tvil den enkleste og anbefalte for nybegynnere.

Første du trenger å gjøre er å installere og aktivere Easy Google Fonts-plugin. For mer informasjon, se vår trinnvise veiledning om hvordan du installerer et WordPress-plugin.

Ved aktivering kan du gå til Utseende »Tilpasser side. Dette åpner brukergrensesnittet for levende tema, hvor du får se ny typografiseksjon.

Ved å klikke på Typografi vil du vise forskjellige deler av nettstedet ditt der du kan bruke Google Fonts. Klikk på 'Rediger skrift' under delen du vil redigere.

Under seksjonen for skriftfamilier kan du velge hvilken Google-skrifttype du vil bruke på nettstedet ditt. Du kan også velge skrifttype, skriftstørrelse, polstring, margin og mer.

Avhengig av temaet ditt, kan antall seksjoner her være begrenset, og du kan ikke direkte endre skriftvalg for mange forskjellige områder av nettstedet ditt.

For å fikse dette, kan plugin også lage dine egne kontroller og bruke dem til å endre skrifter på nettstedet ditt.

Først må du besøke Innstillinger »Google Fonter side og gi et navn til skriftkontrollen din. Bruk noe som hjelper deg raskt å forstå hvor du skal bruke denne skriftkontrollen.

Klikk på 'Create font control' -knappen, og du vil bli bedt om å angi CSS-valg. Du kan legge til HTML-elementer du vil målrette mot (for eksempel h1, h2, p, blockquote) eller bruk CSS-klasser. Du kan bruke Inspect-verktøyet for å finne ut hvilke CSS-klasser som brukes av det aktuelle området du vil endre.

Klikk nå på "Lagre skriftkontroll" -knappen for å lagre innstillingene dine. Du kan opprette så mange skriftkontrollere som du trenger for ulike deler av nettstedet ditt.

For å bruke disse skriftkontrollene må du gå over til Utseende »Tilpasser og klikk på kategorien Typografi.

Under Typografi vil du nå se et tema tema tema også. Hvis du klikker på det, vises de egendefinerte skriftkontrollene du opprettet tidligere. Du kan nå bare klikke på redigeringsknappen for å velge skrifter og utseende for denne kontrollen.

Ikke glem å klikke på lagre eller publiser-knappen for å lagre endringene dine.

Metode 2: Legg manuelt Google Fonts i WordPress

Denne metoden krever at du legger til kode i WordPress-temafiler. Hvis du ikke har gjort dette før, så se vår guide om hvordan du kopierer og limer inn kode i WordPress.

Først besøker du Google Fonts-biblioteket og velger en skrift som du vil bruke. Deretter klikker du på hurtigbruker-knappen under skrifttypen.

Dette tar deg til en annen side der du blir bedt om å velge stilene du vil bruke. Du bør bare velge stiler som du tror du faktisk vil bruke.

Deretter ruller du ned litt til du kommer til embed-kodeseksjonen. Du må kopiere den innebygde koden under standardfanen og lime den inn i temaet eller barntemaets header.php-fil rett etter taggen.

Det er alt du har lagt til en egendefinert Google-font på ditt WordPress-nettsted.

Du kan bruke denne skrifttypen i temaets stilark slik:

 .h1 nettsted-tittel font-family: 'Open Sans', Arial, sans-serif;  

For mer detaljerte instruksjoner, se vår guide om hvordan du legger til Google-skrifttyper i WordPress-temaer.

Legge til egendefinerte skrifttyper i WordPress ved hjelp av Typekit

Typekit er en annen gratis og premium ressurs for fantastiske skrifttyper som du kan bruke i designprosjektene dine. De har et betalt abonnement, samt en begrenset gratis abonnementsplan som du kan bruke.

Bare registrer deg for en Typekit-konto og opprett et nytt sett.

Deretter må du velge en skrift fra Typekit-biblioteket og legge den til i settet. Deretter får du den innebygde koden for settet ditt og leder til WordPress-nettstedet ditt administrasjonsområde.

Nå må du installere og aktivere Typekit Fonts for WordPress plugin. Ved aktivering, bare besøk Innstillinger »Typekit Fonts og lim inn embedkoden på plugininnstillingssiden.

Det er alt, du kan nå bruke Typekit-fonten du valgte i WordPress-temaets stilark slik:

 h1 .site-title font-family: 'modesto-condensed', Arial, sans-serif;  

For mer detaljerte instruksjoner, se vår veiledning hvordan du legger til fantastisk typografi i WordPress ved hjelp av Typekit.

Legge til egendefinerte skrifttyper i WordPress Bruke CSS3 @ font-face

Den mest direkte måten å legge til tilpassede skrifter i WordPress, er å legge til skrifter med CSS3 @ Font-face metode. Denne metoden lar deg bruke hvilken som helst skrift som du liker på nettstedet ditt.

Første du trenger å gjøre er å laste ned skrifttypen du liker i et webformat. Hvis du ikke har webformatet for fonten din, kan du konvertere den ved hjelp av FontSquirrel Webfont-generatoren.

Når du har webfont-filene, må du laste den opp på web hosting serveren din.

Det beste stedet å laste opp skrifter er inne i en ny «fonts» -mappe i temaet eller temaet til barnet ditt.

Du kan bruke FTP eller File Manager til cPanel for å laste opp skrifttypen.

Når du har lastet opp skrifttypen, må du laste inn skrifttypen i temaets stilark ved hjelp av CSS3 @ font-face-regelen som dette:

 @ font-face font-family: Arvo; src: url (http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf); font-weight: normal;  

Ikke glem å erstatte fontfamilien og nettadressen med din egen.

Deretter kan du bruke denne skriften hvor som helst i temaets stilark slik:

 .h1 nettsted-tittel font-family: "Arvo", Arial, sans-serif;  

Lasting av skrifter direkte ved hjelp av CSS3 @ font-face er ikke alltid den beste løsningen. Hvis du bruker en skrift fra Google Fonts eller Typekit, er det best å betjene skriften direkte fra serveren for optimal ytelse.

Det er alt, vi håper denne artikkelen hjalp deg med å legge til tilpassede skrifter i WordPress. Du vil kanskje også sjekke vår guide om hvordan du bruker ikonfonter i WordPress og hvordan du endrer skriftstørrelsen i WordPress.

Hvis du likte denne artikkelen, vennligst abonner på vår YouTube Channel for WordPress-videoopplæringsprogrammer. Du kan også finne oss på Twitter og Facebook.