Kuinka lisätä mukautettuja fontteja WordPress-sivustoosi

Kuinka lisätä mukautettuja fontteja WordPress-sivustoosi

Miksi tehdä blogistasi tylsää käyttämällä tavallisia fontteja? Anna blogisi puhua elävästä persoonallisuudestasi ja aiheista, joita käsittelet monilla mukautetuilla kirjasimilla. Muokatut fontit ovat mukava ominaisuus, jonka avulla blogiisi voi näyttää paremmalta kuin muut.


Totta puhuen; me kaikki rakastamme blogeja ja sivustoja, joilla on oikeat kirjasimet. Ne eivät vain korista sivustoa, vaan auttavat myös houkuttelemaan käyttäjän sisältöön. WordPress-vakiofonttien valinta on kuitenkin rajoitettu ja riippuu käyttämästä teemasta. Hyvä uutinen on, että voit lisätä ne manuaalisesti tai erikoistuneiden laajennusten avulla.

Ja tässä nousee esiin kaksi kysymystä – mistä saat mukautettuja fontteja WordPressille ja kuinka asentaa mukautettuja fontteja WordPress-sivustossasi.

Otetaan selvää.

 Miksi minun pitäisi käyttää mukautettuja fontteja?

Ajat ovat menneet, kun Times New Romania ja Georgiaa pidettiin verkkosivustojen tekstien ainoina kirjasimina. Muutaman viime vuoden aikana fonttitila on muuttunut täysin, kun esiintyvät fontit, kuten Google Fonts ja muut.

Nykyään Internetissä on saatavana satoja ilmaisia ​​fontteja, tieto- ja koulutusapua sekä suunnittelulle tarkoitettuja resursseja. Toisin kuin Adobe Illustrator, Photoshop ja muut klassiset sovellukset, WordPress ei anna sinulle oletuksena täydellistä fonttien hallintaa. Vain jotkut teemat päättävät tukea ja käyttää mukautettuja fontteja.

Siksi tässä viestissä opit kuinka löytää sopivia mukautettuja fontteja ja kuinka niitä käytetään WordPress-sivustossasi.

Mukautettujen kirjasinten käytön merkitys

Miksi vaihtaa kirjasimia, luetelmakohtaa sanojen välillä, riviväliä, kirjainväliä tai fonttikylläisyyttä? Jotkut tutkimukset todistavat sen typografia parantaa lukemisen ymmärrystä.

Paljon riippuu fonttien rakenteesta. Tietoisella ja alitajuisella tasolla – kaikki arvioivat verkkosivun sisällön suunnittelun perusteella.

Fonttisuunnittelu vaikuttaa lukijoihin, vaikka he eivät kiinnittäisi siihen huomiota. Fonttisuunnittelusta luopuminen tarkoittaa luopumista itse! Lukijan mieliala riippuu siitä. Fontti joko helpottaa lukemista tai pakottaa käyttäjät poistumaan sivulta.

Kaikissa selaimissa on joukko oletus fontteja. Tämä tarkoittaa, että jos kirjasinta ei määritetä sivun CSS: ssä, käytetään vakioversiota. Voit aina käyttää oletusfontteja, mutta ne vaikeuttavat käyttäjien työtä. Siksi on välttämätöntä käyttää mukautettua fonttia. Jos teema ei anna vaihtoehtoja fontin vaihtamiseen, monet sivustot ja työkalut voivat auttaa.

Google Fonts Alternatives

Mistä löytää mukautettuja fontteja

Monet teistä tietävät ilmaisista Google-fontteista. On monia muita sivustoja, joista löydät kauniita fontteja. Jotkut heistä ovat ilmaisia ​​henkilökohtaiseen käyttöön. Jos tarvitset kaupalliseen käyttöön, tarvitset lisenssin. Google Fonts ja Adobe Edge Fonts ovat ilmaisia. Siksi ne eivät ole niin ainutlaatuisia. Ja tämä ei sovi meille.

Tässä on muutama muut resurssit fonttien löytämiseen ilmaiseksi ja kaupalliseen käyttöön:

  1. TemplateMonster – TemplateMonster-kauppapaikan verkkosivustolta löydät kaiken tarvittavan Web-suunnitteluun. On myös monia fontteja ja fonttipaketteja henkilökohtaiseen käyttöön pienestä hinnasta. Ne esitellään myös yhdellä web-kehityspaketilla. Kokoelma on valtava ja luova. Valinnan helpottamiseksi kaikki esitteet tai kehykset esittävät fontit. Jokaisella kirjasimella on myös kaupallinen lisenssi.
  2. MyFonts – MyFonts tarjoaa tällä hetkellä suurimman kirjasinvalikoiman maailmassa. Hinnat ovat kuitenkin myös korkeammassa segmentissä. Joten, jos budjetti on tiukka, se ei ehkä ole sinulle.
  3. FontSpring – Fontspring myy hienoja fontteja kaupalliseen käyttöön. Mutta melkein missä tahansa perheessä on 1-2 ilmaista kirjasinta, joita voidaan käyttää henkilökohtaisiin tarkoituksiin. Lisäksi on erillinen osa ilmaisia ​​fontteja. Kokoelma on vilkas. Sinun on kuitenkin tutkittava huolellisesti tietyn kirjasimen käyttöoikeustiedot ennen lataamista.
  4. Cufonfonts – Se on myös laaja kokoelma erilaisia ​​fontteja. Valitse mikä tahansa, niin näet sivun, josta on yksityiskohtaisia ​​tietoja siitä. Ilmaisia ​​fontteja on paljon, ja ne on jaettu erillisiin osiin. Lajittelujärjestelmä CufonFontsissa on melko joustava ja kätevä. Mukana on myös Webfont-tuki.
  5. Dafont – Toinen saatavilla oleva kokoelma 3500 ilmaista kirjasinta. Suurin osa niistä on suunniteltu vain henkilökohtaiseen käyttöön. Mukava ominaisuus DaFont on luokkajärjestelmä. Voit valita fontteja sarjakuvien, videopelien, vanhojen tai tyyliteltyjen japanilaisten kirjaimien tyyliin.

Fonttien valinta on erittäin houkuttelevaa, koska ne ovat kaikki kauniita. Mutta sinun ei pitäisi valita paljon. Käyttää korkeintaan kaksi fonttia sivustolla. Silloin verkkosivustosi ulkoasu on yhdenmukainen. Kun olet valinnut fontit, muista ladata tiedostoja jokaiselle käyttämällesi tyylille (normaali, lihavoitu, kursivoitu jne.).

Nyt kun olet valinnut sopivan kirjasintyylin sivustolle, selvitetään kuinka se lisätään.

Kuinka lisätä mukautettuja fontteja WordPressiin

Fonttien lisäämiseen WordPress-sivustoon on muutama tapa:

  1. liitännäiset: tässä tapauksessa prosessin helpottamiseksi käytetään erilaisia ​​WordPress-laajennuksia.
  2. Käsin: Tätä menetelmää käytettäessä tarvitset ladatun fonttilatauksen sivustolle ja muokata CSS-tiedostoa.
  3. Teemat: Moniin suosittuihin teemoihin sisältyy sisäänrakennettuja vaihtoehtoja fonttien mukauttamiseksi (huom. emme kata tätä vaihtoehtoa, koska prosessi vaihtelee käytetyn teeman mukaan, mutta laadukkaat premium-teemat, kuten Total WordPress -teema, tarjoavat verkossa dokumentit, joita voit helposti seurata – kuten lisätäksesi mukautettuja fontteja kokonaisuuteen kuten tämä opas)

Vaihtoehto 1 – Vaihda WordPress-fontit laajennuksilla

Jos emme välitä globaaleista muutoksista, voimme asentaa WordPress-laajennuksia, jotka muuttavat fontteja sivustollesi.

Muokattujen fonttilaajennusten ominaisuudet

Avoimen lähdekoodin ohjelmistoilla on etu yhteisön edun kannalta, ja WordPressillä on myös tämä etu. Useiden WordPress-laajennusten avulla voit lisätä mukautettuja fontteja. Kuinka valita sopiva laajennus, jolla on niin paljon? Mitkä ovat mukautettujen fonttilaajennusten ominaisuudet?

Tässä on muutama huomioitava seikka:

  • Kyky käyttää mukautettuja fontteja
  • Kyky käyttää useampaa kuin yhtä kirjasinta
  • Kohdeotsikot ja komponentit
  • Bonus: kyky muuttaa fonttiasetuksia visuaalisessa muokkausohjelmassa

Siinä kaikki. Luettelon ensimmäinen ominaisuus on erittäin tärkeä. Voit aina ladata kirjasimia sivustoilta, kuten DaFont, Font Squirrel, jne., Mutta sinun on voitava lähettää ne WordPressiin..

Katsotaanpa joitain WordPress-laajennuksia, joiden avulla voit ladata mukautettuja fontteja.

Muokattu fonttien latausohjelma

Muokattu fonttien latausohjelma

Tämän laajennuksen avulla voit ladata Google-fontteja ja soveltaa niitä blogin eri osiin. Esimerkiksi artikkelin tai sivun otsikoihin tai runkoon.

Käytä mitä tahansa kirjasinta

Käytä mitä tahansa kirjasinta

Tämä on WordPress-laajennus, joka antaa sinulle kätevän käyttöliittymän ladata fontteja ja käyttää niitä suoraan visuaalisen editorin kautta. WordPress-visuaalinen editori voi muuttaa automaattisesti minkä tahansa tekstin fontin. Tämä laajennus tarjoaa useita ominaisuuksia, mikä tekee mukautettujen fonttien lisäämisprosessista paljon hallittavissa.

WP Google Fonts

WP Google Fonts

WP Google Fonts antaa sinun käyttää Google-fonttiluetteloa. Yksi tämän laajennuksen uskomattomista eduista on lähes 1000 Google-fontin lisääminen. Vaikka Google-fontteja voi enkeroida manuaalisesti, pluginin käyttö on paljon helpompaa useimmille käyttäjille.

Fonttien asentaminen laajennuksella?

Otetaan esimerkiksi WP Google Fonts. Asenna vain tämä laajennus virallisesta WordPress-arkistosta ja avaa Google Fonts -osa.

WP Google Fonts

Näet täällä Google-fonttien ohjauspaneelin. Valitse fontit ja muuta erilaisia ​​asetuksia, kuten kirjasintyyli, elementit, joihin sitä käytetään, jne.

Vaihtoehto 2 – Asenna WordPress-mukautetut fontit manuaalisesti

@ Font-face -direktiivin avulla voit yhdistää joko yhden tai useita fontteja sivustoosi. Mutta tällä menetelmällä on hyvät ja huonot puolensa.

Plussat:

  • CSS: n kautta voit yhdistää kirjasimia missä tahansa muodossa: ttf, otf, woff, svg.
  • Fonttitiedostot sijaitsevat palvelimellasi – et ole riippuvainen kolmansien osapuolien palveluista.

Haittoja:

  • Jotta kullekin tyylille olisi oikea fontin yhteys, sinun on rekisteröitävä erillinen koodi.
  • Tietämättä CSS: ää, voit sekoittaa helposti.

Mutta se ei ole todellinen ongelma, jos pystyt Kopioi vain valmis koodi ja missä sinun on määritettävä arvosi.

Merkintä: Ennen kuin aloitat, muista luoda lapsiteema sivustollesi. Tällä tavalla voit tehdä kaikki muutokset lapsiteemaasi, jättämällä ydinteemasi tahdikkuuteen, jotta voit päivittää sen helposti tulevaisuudessa.

Vaihe 1: Luo ”fontit” -kansio

Luo lapsiteemasi sisällä uusi ”fontit” -kansio kohtaan: wp-content / themes / oman lapsen-teeman / kirjasimet

Vaihe 2. Lataa ladatut fonttitiedostot verkkosivustollesi

Tämä voidaan tehdä isäntäsi ohjauspaneelin tai FTP: n kautta.

Lisää kaikki fonttitiedostot juuri lisättyyn fonttikansioon: wp-content / themes / oman lapsen-teeman / kirjasimet loit.

Vaihe 3. Tuo fontit alateeman tyylitaulukon kautta

Avaa lapsiteeman tyyli.css-tiedosto ja lisää seuraava koodi CSS-tiedoston alkuun (alateeman kommentoinnin jälkeen):

@ Font-face {
kirjasinperhe: 'MyWebFont';
src: url ('fontit / WebFont.eot');
src: url ('fontts / WebFont.eot? #iefix') -muoto ('embedded-opentype'),
url ('fontts / WebFont.woff') -muoto ('woff'),
url ('fontts / WebFont.ttf') -muoto ('truetype'),
url ('fontts / WebFont.svg # svgwebfont') -muoto ('svg');
kirjasinpaino: normaali;
fontti-tyyli: normaali;
}

Missä MyWebFont on fontin nimi ja src-ominaisuuden arvo (lainausmerkeissä suluissa olevat tiedot) on niiden sijainti (suhteelliset linkit). Jokainen tyyli on määritettävä erikseen.

Koska yhdistämme ensin normaalin tyylin, asetamme fontin painon ja fontti-ominaisuudet normaaliksi.

Vaihe 4. Kun lisäät kursivointi, kirjoita seuraava:

@ Font-face {
kirjasinperhe: 'MyWebFont';
src: url ('fontit / WebFont-Italic.eot');
src: url ('fontts / WebFont-Italic.eot? #iefix') -muoto ('embedded-opentype'),
url ('fontts / WebFont-Italic.woff') -muoto ('woff'),
url ('fontts / WebFont-Italic.ttf') -muoto ('truetype'),
url ('fontts / WebFont-Italic.svg # svgwebfont') -muoto ('svg');
kirjasinpaino: normaali;
kirjasintyyli: kursivoitu;
}

Jos kaikki on samaa, vain liitämme fontti-ominaisuuden kursivointiin.

Vaihe 5. Lisää lihavoitu fontti lisäämällä seuraava koodi:

@ Font-face {
kirjasinperhe: 'MyWebFont';
src: url ('fontit / WebFont-Bold.eot');
src: url ('fontts / WebFont-Bold.eot? #iefix') -muoto ('embedded-opentype'),
url ('fontts / WebFont-Bold.woff') -muoto ('woff'),
url ('fontts / WebFont-Bold.ttf') -muoto ('truetype'),
url ('fontts / WebFont-Bold.svg # svgwebfont') -muoto ('svg');
kirjasinpaino: lihavoitu;
fontti-tyyli: normaali;
}

Missä asetimme fontin painon ominaisuuden lihavoituksi.

Muista ilmoittaa fonttitiedostojen oikea sijainti jokaiselle tyylille.

Vaihe 6. Liitä lihavoitu kursivointi kirjoittamalla seuraava:

@ Font-face {
kirjasinperhe: 'MyWebFont';
src: url ('fontit / WebFont-Italic-Bold.eot');
src: url ('fontts / WebFont-Italic-Bold.eot? #iefix') -muoto ('embedded-opentype'),
url ('fontit / WebFont-Italic-Bold.woff') -muoto ('woff'),
url ('fontts / WebFont-Italic-Bold.ttf') -muoto ('truetype'),
url ('fontit / WebFont-Italic-Bold.svg # svgwebfont') -muoto ('svg');
kirjasinpaino: lihavoitu;
kirjasintyyli: kursivoitu;
}

No, siinä kaikki �� Nyt olet yhdistänyt neljä kirjasintyyliä verkkosivustoosi.

Mutta on yksi huomautus – tämä fonttiyhteys näytetään väärin Internet Explorer 8: ssa. Lohdutuksena on, että IE8: ta käyttää edelleen hyvin vähän ihmisiä..

Räätälöi mukautettuja fontteja WordPressille

Mikä on ensimmäinen asia, jonka käyttäjät huomaa vieraillessaan sivustollasi? Oikein, sen muotoilu! Suurin osa suunnittelusta riippuu kauniiden kirjasinten oikeasta käytöstä. Joten sinun on huolehdittava sivustosi fonttisuunnittelusta. Lisää koodi tai käytä jotakin yllä mainituista laajennuksista upottaaksesi uuden kirjasintyylin. Sinun on valittava, millä tavalla valitset sen.

Varmista, että et käytä useampaa kuin kahta kirjasinta samassa sivustossa. Koska lisää mukautettuja fontteja lisäät sivustoon, sitä hitaammaksi sivuston nopeus muuttuu.

Siinä kaikki, voit kommentoida vapaasti. 

Otamme mielellämme myös kuulla, minkä vaihtoehdon valitset lisätäksesi mukautetun fontin verkkosivustollesi ja mistä löydät fontin.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map