Fontin vaihtaminen WordPress-teemassa – 3 menetelmää (2022)

muuta wordpress-kirjasinten teemaa

Onko sinulla ongelmia, kun yrität vaihtaa fonttia WordPress-teemassa?

Verkkosivustosi typografia on ratkaisevan tärkeää sekä sen brändäyksen että käytettävyyden kannalta, joten oikean kirjasintyypin valinta on tärkeää.

Onneksi suurin osa WordPress-teemoista sisältää mahdollisuuden vaihtaa fontteja, vaikka jotkut ovatkin tässä suhteessa joustavampia kuin toiset. Lisäksi saatavilla on laajennuksia, joita voidaan käyttää minkä tahansa teeman kanssa.

Aloitamme tämän viestin osoittamalla, kuinka voit käyttää teeman sisäänrakennettuja vaihtoehtoja fontin vaihtamiseen WordPress-teemassa.

Lisäksi, jos teemasi ei vielä sisällä haluamiasi fontteja, jaamme ilmaisia ​​lisäosia, joiden avulla voit lisätä kirjasinvaihtoehtoja mihin tahansa WordPress-teemaan, vaikka siitä puuttuisikin joustavia sisäänrakennettuja vaihtoehtoja.

Esittelemme myös, kuinka WordPress-editorilla muokataan tietyissä sisällöissä käytettyjä fontteja.

 

1. Fontin vaihtaminen WordPress-teemassa WordPress-muokkaustyökalun avulla

Löydät yleensä teeman kirjasinvaihtoehdot alkuperäisestä WordPress Customizerista, jossa suurin osa WordPress-teemoista vuonna 2022 perustuu tyylin ja suunnittelun mukauttamiseen.

Näytämme, kuinka näitä sisäänrakennettuja kirjasinvaihtoehtoja käytetään käyttämällä mukautuvaa Neve-teemaa esimerkkinä tässä ensimmäisessä osassa.

On tärkeää muistaa, että jokainen teema käsittelee asioita hieman eri tavalla. Neve on myös melko mukautuva teema, joten on hyvä mahdollisuus, että teemallasi ei ole niin monta fonttivaihtoehtoa.

Tästä huolimatta sinun pitäisi pystyä seuraamaan tätä menetelmää minkä tahansa teeman kanssa ja ainakin pääsemään joihinkin kirjasinvaihtoehtoihin.

Avaa WordPress Customizer

Avaa WordPress Customizer

Aloita siirtymällä kohtaan Ulkoasu → Mukauta ja avaa WordPress-muokkaus:

Etsi fontin/typografian asetukset

Kuinka vaihtaa fonttia WordPress-teemassa

Etsi seuraavaksi teemasi fontti-/typografia-asetukset. Valitettavasti ne sijaitsevat eri tavalla jokaisessa teemassa, joten saatat joutua selaamaan eri asetusosioita.

Löydät Neve-teeman huipputason vaihtoehdon nimeltä Typography; napsauta sitä valitaksesi sen.

Valitse fontit ja tallenna muutokset

Nyt voit päättää, miten edetä. Teemasta riippuen saatat nähdä typografia-asetusten lisäjaon sisällön tyypin mukaan. Neve-teema tekee näin:

Voit esimerkiksi avata teemasi otsikoiden (kuten viestin tai sivun otsikon) kirjasinasetukset ja vaihtaa WordPress-kirjasimen. Näet, että Neve-teemaa käytettäessä on saatavilla useita fontteja:

Teeman live-esikatselun fonttien pitäisi päivittyä automaattisesti, kun teet valinnat.

Saat uudet kirjasinvalinnat käyttöön napsauttamalla sinistä Julkaise-painiketta, kun olet tyytyväinen siihen, miltä kaikki näyttää.

2. Google-fonttien lisääminen mihin tahansa WordPress-teemaan

Jos noudatit yllä olevaa opetusohjelmaa kirjasinten vaihtamisesta WordPress-teemassa ja olet hämmentynyt teemasi sisäänrakennetuista kirjasinvaihtoehdoista, käytä laajennusta, joka antaa sinulle pääsyn useampaan kirjasinvaihtoehtoon, erityisesti tuhansiin kirjasinvaihtoehtoihin. kirjasimia Google-luettelossa, on hyvä varavaihtoehto.

Ilmainen Easy Google Fonts -laajennus on yksi suosituimmista täällä saatavilla olevista vaihtoehdoista.

Voit valita yli 600 ilmaisesta kirjasimesta, joita Google Fonts tarjoaa käyttämällä Helppo Google-fontti, joka integroituu mihin tahansa WordPress-teemaan.

Tuntemattomille Google Fonts on luultavasti tunnetuin ilmaisten kirjasinten lähde ja tarjoaa enemmän kuin tarpeeksi valikoiman suurimmalle osalle verkkosivustoista.

Siirrymme Twenty Twenty One -oletusteemaan (jossa on hyvin perustason typografian säätimet) näyttääksemme, miten tämä toimii, ennen kuin määrität laajennuksen lisäämään fonttivaihtoehtoja.

Asenna ja aktivoi laajennus

Asenna ja aktivoi laajennus

Aloita asentamalla ja aktivoimalla Easy Google Fonts -laajennus WordPress.orgista. Jos et ole varma, kuinka tämä tehdään, voit käyttää WordPress-laajennuksen asentamiseen tarkoitettua sny-opasta.

Valitse käytettävät Google-kirjasimet

Valitse käytettävät Google-kirjasimet

Tämän jälkeen on valittava fontit, joita haluat käyttää. Google Fonts -sivusto helpottaa kaikkien vaihtoehtojen selaamista, koska näet siellä kunkin kirjasimen esikatselun, vaikka voit käyttää koko luetteloa laajennuksen asetuksista.

Jos tarvitset ideoita, tutustu suosituimpiin Google-kirjasimiin. Lisäksi sinun tulee yleensä valita vähintään kaksi toisiaan täydentävää fonttia.

Kun löydät haluamasi fontin, muista kirjoittaa sen nimi muistiin, jotta voit muistaa sen myöhemmin. Valitse myös haluamasi tyylit. Esimerkkinä "Keskitaso 500".

Avaa WordPress Customizer ja muokkaa fontteja.

Pääset WordPress-muokkaustyökaluun siirtymällä WordPress-hallintapaneelin kohtaan Ulkoasu > Mukauta.

Sivupalkin valikon yläosassa pitäisi nyt olla "typografia"-osio. Näitä asetuksia hallitsee Easy Google Fonts -laajennus, ei teemasi:

Valitse alivalikosta Oletustypografia.

Sivustosi erityyppiselle sisällölle voit nyt valita fontin Google Fontsista:

  • Kappaleet – teksti sivujen/viestien sisällä.
  • Otsikko 1 – blogitekstisi/sivusi otsikko.  
  • Otsikko 2 – viestisi/sivusi ylätason otsikko.
  • Otsikko 3 – alaotsikko otsikon 2 alla.

Napsauta Muokkaa fonttia sen sisällön kohdalla, jota haluat muuttaa. Voit valita fontin nimen ja painon. Sinun pitäisi nähdä sivustosi päivityksen live-esikatselu, kun teet päätöksiäsi.

Kun olet tyytyväinen valintoihin, julkaise uudet kirjasimet napsauttamalla Julkaise.

3. Kuinka muuttaa WordPress-fontteja editorissa

Osoitimme, kuinka voit muuttaa koko verkkosivustosi WordPress-teeman fonttia kahdella yllä mainitulla menetelmällä. Toisin sanoen koko sivustosi kappaleteksti muuttuu, jos muutat kappaletekstin fonttia.

Joskus voi kuitenkin olla, että joudut muuttamaan vain yhden sisältöosan fontteja.

Käytä ilmaista "Fonts Plugin" -laajennusta määrittääksesi tämän (jolla voit myös lisätä mukautettuja kirjasimia WordPress-teemaan, aivan kuten Easy Google Fonts -laajennus edellisessä osiossa).

Saat uuden Google Fonts -lohkon, jonka avulla voit lisätä tekstiä millä tahansa Google-kirjasimella, kun olet asentanut ja aktivoinut ilmaisen laajennuksen. Lisäksi voit valita otsikoita tai kappaletekstejä käyttämällä lohkoasetuksia:

Kuinka vaihtaa fonttia WordPress-teemassa

Sinun pitäisi pystyä muokkaamaan fonttia WordPress-teemassa tässä vaiheessa.

WordPress Customizerin sisäänrakennettuja typografiavaihtoehtoja voidaan käyttää, jos sinulla on jo asennettu joustava teema, kuten Neve.

Jos teemassasi ei ole monia sisäänrakennettuja vaihtoehtoja, voit myös lisätä tuen yli 600 Google Fonts -kirjasimelle käyttämällä Easy Google Fonts -laajennusta (tai Fonts Plugin -laajennusta, jonka näytin sinulle bonusosiossa).

Katso missä tahansa oppaassa, miten se tehdään muuntaa minkä tahansa WordPress-teeman räätälöityyn sivustoon, josta saat lisäehdotuksia teemasi personoimiseen ja brändäämiseen.

Jos haluat nähdä tämän oppaan videona, voit napsauttaa alla olevaa videota.

Vaihda fonttia WordPress-teeman usein kysytyissä kysymyksissä

Kuinka voin muuttaa kirjasinkokoa WordPressissä ilman CSS:ää?

Teeman mukauttaja, joka löytyy kohdasta Ulkoasu » Mukauta, on paras työkalu tähän. Voit ehkä muuttaa fonttikokoa joissakin WordPress-teemoissa. Voit käyttää sitä kirjoittamatta CSS-koodia, jos löydät tämän vaihtoehdon.

Kuinka voin muuttaa fonttityyliä HTML:n avulla?

Käytä HTML:n tyyliominaisuutta muuttaaksesi tekstin fonttia. Elementin rivityyli määritetään tyyliominaisuuden kautta. Attribuuttia käytetään CSS-ominaisuuksien font-family, font-size, font-style ja HTML-tunnisteen p> kanssa. HTML5 ei tue fontti> -tunnistetta, joten sen sijaan käytetään CSS-tyyliä fontin muokkaamiseen.

Kuinka vaihdan fonttia WordPress 2022:ssa?

Valitse valikosta Typografia > Oletustypografia. Nyt voit muuttaa jokaisen verkkosivustosi komponentin fonttia (otsikkotunnisteet ja kappalebotti). Tee tarvittavat muutokset ja tallenna sitten muokatut versiot.

 

kirjailijasta
Shahzad Saeed
Kirjoittaja: Shahzad SaeedVerkkosivu: http://shahzadsaeed.com/
Shahzaad Saaed on ollut esillä lukuisilla viranomaisverkkosivustoilla WordPress-asiantuntijana. Hän on erikoistunut sisältömarkkinointiin auttaakseen yrityksiä kasvattamaan liikennettä.

Yksi asia vielä... Tiesitkö, että ihmiset, jotka jakavat hyödyllisiä juttuja, kuten tämä viesti, näyttävät myös mahtavilta? ;-)
Ole hyvä Jätä hyödyllinen kommentoi ajatuksiasi ja jaa tämä sitten Facebook-ryhmissäsi (ryhmissä), jotka pitävät tätä hyödyllisenä, ja hyödynnetään yhdessä. Kiitos jakamisesta ja mukavuudesta!

Disclosure: Tämä sivu voi sisältää linkkejä ulkoisille sivustoille tuotteille, joita rakastamme ja kannatamme sydämestämme. Jos ostat suosittelemiamme tuotteita, saatamme ansaita viittausmaksun. Tällaiset maksut eivät vaikuta suosituksiimme, emmekä hyväksy maksuja positiivisista arvosteluista.

Kirjoittaja (t) esillä:  Inc-lehden logo   Sitepoint-logo   CSS Tricks -logo    webdesignerdepot-logo   WPMU DEV -logo   ja paljon muuta ...