Näin lisäät omia fontteja WordPress-sivuille

Välillä WordPress-sivujesi teeman tarjoamat fonttivaihtoehdot eivät vaan riitä ja haluaisit käyttää jotain muuta fonttia sivuillasi.

Tässä artikkelissa kerroin sinulle, miten lataat oman fontin WordPress-sivuillesi ja mitä sinun kannattaa ottaa siinä huomioon.

Mitä fontteja voit käyttää nettisivuillasi

Netistä löytyy valtavasti sivustoja, joilta voit ladata käyttöösi fontteja. Kannattaa kuitenkin muistaa, että fonteillakin on tekijänoikeudet. Varmista siis, että kyseistä fonttia saa käyttää kaupallisiin tarkoituksiin, jos olet lisäämässä sen yrityksesi nettisivuille.

Esimerkiksi Font Squirrel -sivusto kertoo, että kaikkien sen fonttien pitäisi olla sallittuja myös kaupalliseen käyttöön. Jokaisen fontin kohdalla kannattaa kuitenkin tarkistaa, onko asia todellisuudessa näin. Jos fontin tiedoista löytyy linkki sen alkuperäiseen julkaisijaan, käy yleensä ilmi, että fontti ei olekaan ilmainen kaupalliseen käyttöön.

Mistä sitten voit löytää fontteja, joita saat käyttää nettisivuillasi? Kätevintä on yksinkertaisesti ostaa sopiva fontti, jolloin tiedät lisenssien olevan varmasti kunnossa. Hyvä paikka fonttien ostamiseen on esimerkiksi Creative Market -sivusto, josta löytyy valtavasti niin erilaisia fontteja kuin myös erilaisia graafikoita, tiedostopohjia jne. 

Jos ostat fontteja Creative Marketista, ota huomioon, että heiltä löytyy erilaisia lisenssejä fonteille riippuen käyttötarkoituksesta. Kun haluat käyttää fonttia nettisivuillasi, tarvitset webfont-lisenssin. Desktop-lisenssi antaa puolestaan oikeuden käyttää fonttia logoissa ja sosiaalisen median tai nettisivujen kuvissa. Jos siis haluat käyttää samaa fonttia sekä nettisivujesi teksteissä että somea varten tekemissäsi kuvissa, tarvitset sekä webfont- että desktop-lisenssin. 

Webfont-lisenssit ostetaan sivuston sivukatselujen mukaan, edullisin vaihtoehto on 10 000 sivukatselua / kk, joka on pienyrittäjälle usein täysin riittävä vaihtoehto, ellet tiedä, että sivuillasi tulee olemaan huomattavia määriä liikennettä.

Moni teema, kuten myös mallipohjissa käyttämäni Kadence, sisältää jo valmiiksi Google fontit. Jos käyttämäsi teema ei kuitenkaan sisällä niitä, voit käydä etsimässä sopivia Google fontteja täältä. Google fontit ovat ilmaisia käyttää nettisivuilla.

Miten lataat oman fontin WordPress-sivuille

Mallipohjani WordPress-sivuille sisältävät jo valmiiksi kaikki Google fontit, mutta sivuille on myös mahdollista lisätä omia fontteja. Kätevimmin tämä onnistuu lisäosan avulla. 

Kadencelta löytyy oma Custom Fonts -lisäosa fonttien lisäämiseen. Se kuitenkin sisältyy vain Kadencen maksullisiin paketteihin eikä niitä ole välttämättä järkevää hankkia, jos tarvitset vain mahdollisuuden fontin lisäämiseen. (Mallipohjani käyttävät ilmaisia versioita Kadence-teemasta ja Kadence Blocks -lisäosasta, eikä mallipohjien käyttö vaadi Kadencen maksullisia paketteja.)

Toinen vaihtoehto fonttien lisäämiseen on Use Any Font -lisäosa. Sillä pystyt lisäämään sivustolle yhden fontin ilmaiseksi. Jos haluat lisätä useampia fontteja, tarvitset lisäosan Premium Key:n, joka ei kuitenkaan ole kallis. Premium Key yhdelle sivustolle maksaa tällä hetkellä 9,99 dollaria ja kyseessä on kertamaksu.

Näin käytät Use Any Font -lisäosaa fontin lataamiseen

1. WordPressin ohjauspaneelissa mene Lisäosat -> Asenna lisäosa

2. Hae “Etsi lisäosia” -kohdassa oikea lisäosa hakusanalla “use any font”

3. Löydettyäsi oikean lisäosan, klikkaa Asenna nyt ja sitten Ota käyttöön

4. Mene nyt WordPressin ohjauspaneelissa vasemman reunan valikossa kohtaan Use Any Font

5. Mene Use Any Fontin välilehdelle API Key. Jos haluat lisätä vain yhden fontin ilmaiseksi, klikkaa Generate Free Lite / Test API Key ja tämän jälkeen klikkaa Verify. (Jos haluat käyttää maksullista versiota ja lisätä useamman fontin, klikkaa Get Premium Key ja sinut ohjataan ostamaan maksullinen Premium Key. Tämän jälkeen lisää se API Key -kohtaan ja klikkaa Verify.)

6. Mene Upload Font -välilehdelle ja klikkaa Upload Fonts

7. Font name -kohtaan kirjoita fontin nimi (käytä fontin oikeaa nimeä sen sijaan, että antaisit nimeksi esim. oma fontti)

8. Ilmaisessa versiossa, jätä Enable Font Weight Variation tyhjäksi. Maksullisella versiolla sinulla on mahdollisuus ladata samasta fontista useita eri versioita (fontista saattaa olla esim. useita eri paksuuksia, kuten Thin, Regular ja Bold sekä tyylejä, kuten normaali ja kursivoitu versio). Jos haluat käyttää tätä ominaisuutta, klikkaa ruksi kohtaan Enable Font Weight Variation. Tämän jälkeen voit valita, minkä fontin paksuuden (weight) ja tyylin (style) olet lataamassa.

9. Font file -kohdassa, klikkaa Valitse tiedosto ja valitse fontin tiedosto omalta koneeltasi (tiedosto voi olla ttf, otf, eot, woff tai woff2 -muodossa). Tämän jälkeen klikkaa vielä Upload-painiketta

10. Fontti on nyt ladattu sivustolle.

11. Kadence-teeman kanssa löydät fontin normaalisti sivuston mukauttimesta (Ulkoasu -> Mukauta) sekä kaikista Kadence Blocksin sisältölohkoista, joissa on kohta fontin valinnalle. Älä siis käytä Use Any Font -lisäosan omia Assign Font -välilehden valintoja, et tarvitse niitä.