Roboto otsikoissa, Open Sans leipätekstissä. Sivuston typografia näyttää puolelta kaikista WordPress-asennuksista. Kävijä huomasi kaavan, tunnisti fontin, ja sivusto menetti osan yksilöllisyydestään jo ennen ensimmäistä kappaletta.

Mukautettu fontti liitetään WordPressiin kahdella tavalla: lisäosan avulla kahdessa minuutissa ilman yhtäkään koodiriviä, tai manuaalisesti @font-face-määrityksellä, jolloin hallitset tiedostoja täysin. Molemmat toimivat luotettavasti, valinta riippuu CSS-kokemuksestasi.

Seuraavaksi käymme läpi, mistä fontteja saa, miten lisäosa asennetaan ja miten @font-face lisätään child-teemaan. Koodi on otettu toimivista asennuksista: liitä se, vaihda tiedostonimi, ja typografiasi on valmis.

💡 Nopea yleiskatsaus:

• Lataa fontti DaFontista tai FontSquirrelistä WOFF2- tai TTF-muodossa: vähintään kolme leikkausta (regular, bold, italic).
• Asenna Use Any Font tai Fonts Plugin, lataa tiedosto hallintapaneelin kautta ja kohdista fontti haluamillesi elementeille. Koodia ei tarvita.
• Tai liitä manuaalisesti: luo fonts-kansio child-teemaan, siirrä tiedostot FTP:llä ja lisää @font-face style.css-tiedostoon jokaiselle leikkaukselle.
• Tarkista näkymä usealla selaimella äläkä asenna yli kahta mukautettua fonttia: jokainen tiedosto kasvattaa sivun painoa.

Mistä fontteja saa ja missä muodossa

Google Fontsit tuntevat kaikki, ja juuri siksi niitä on kaikkialla. Jos tarvitset jotain vähemmän kulunutta, tässä on kolme testattua lähdettä.

DaFont tarjoaa yli 3 500 fonttia kategorioittain sarjakuvista vintageen. Useimmat ovat ilmaisia yksityiskäyttöön. Kaupallisissa projekteissa tarkista jokaisen tiedoston lisenssi erikseen, ne on listattu fontin sivulla.

FontSquirrel keskittyy ilmaisiin fontteihin, joissa on kaupallinen lisenssi. Kokoelma on pieni, mutta juristit ovat tarkastaneet jokaisen fontin. Sisäänrakennettu generaattori muuntaa ladatun tiedoston WOFF- ja WOFF2-muotoon yhdellä klikkauksella.

FontSpring myy maksullisia fontteja, mutta lähes jokaisessa perheessä on yksi tai kaksi ilmaista leikkausta. Lue lisenssi huolellisesti ennen lataamista: eri leikkauksilla voi olla eri ehdot.

Yleissääntö: älä laita sivustolle yli kahta mukautettua fonttia. Yksi otsikoille, toinen leipätekstille, se riittää. Jokainen tiedosto lisää HTTP-pyynnön ja kasvattaa sivun painoa 30-100 kt.

Lataa kaikki leikkaukset kerralla: regular, bold, italic ja bold italic. Jos tiedostossa on vain yksi leikkaus, selain väärentää lihavoinnin ja kursivoinnin keinotekoisella paksunnuksella, ja lopputulos näyttää karkealta.

Tapa 1: lisäosa kahdessa minuutissa

Lisäosa on yksinkertaisin reitti. Asennat, lataat fonttitiedoston, valitset mihin sitä sovelletaan. Ei koodia, ei FTP-yhteyksiä.

Use Any Font

🔗 Use Any Font WordPress.orgissa

🔗 Kuvakaappaukset ja demo

Lataa fontit TTF-, OTF- ja WOFF-muodoissa, muuntaa automaattisesti WOFF2-muotoon Brotli-pakkauksella. WordPress.orgin lisäosasivun mukaan latausnopeus paranee noin 30%. Fontit säilytetään omalla palvelimellasi: GDPR-yhteensopiva suoraan laatikosta, ei riippuvuutta ulkoisiin rajapintoihin muuntamisen jälkeen.

Asennuksen jälkeen saat API-avaimen (ilmainen Lite-avain antaa yhden muunnoksen), lataa tiedoston ja määritä fontti visuaalisen käyttöliittymän kautta. Voit kohdistaa sen otsikoihin, leipätekstiin tai tiettyihin lohkoihin suoraan hallintapaneelista.

Tukee integraatiota Elementoriin, Diviin, WPBakeryyn, Gutenbergiin: määritä fontti kerran lisäosassa, niin se näkyy rakentajan fonttilistassa.

Huomio: useampaa fonttia varten tarvitset Premium-avaimen. Tyypilliselle sivustolle ilmainen versio riittää: yksi brändifontti otsikoihin, Google Fontsit leipätekstiin.

Fonts Plugin

🔗 Fonts Plugin WordPress.orgissa

🔗 Lisäosan kuvakaappaukset

Entinen Olympus Google Fonts: nimetty uudelleen, toiminnallisuutta laajennettu. Lisäosasivun mukaan sillä on yli 200 000 aktiivista asennusta ja 5 tähden arvosana yli 1 200 käyttäjältä. Tukee Google Fontseja, Adobe Fontseja (Typekit) ja omien tiedostojen lataamista.

Käyttöönotto tapahtuu mukauttimen kautta: valitse fontti, näe live-esikatselu, tallenna.

Pro-versio lisää Google Fontsien paikallisen isännöinnin GDPR:ää varten, vain tarvittavien leikkausten valikoivan lataamisen sekä koon, värin ja rivikorkeuden hallinnan. Ilmainen versio riittää useimmille sivustoille.

Lisäosa vai manuaalinen: milloin valita kumpi

Lisäosa voittaa nopeudessa: 2 minuutin asennus, koodia ei tarvita. Mutta olet riippuvainen lisäosan päivityksistä ja sen yhteensopivuudesta WordPress-versiosi kanssa.

Manuaalinen asennus @font-face-säännöllä on monimutkaisempi pystyttää, mutta hallitset jokaista tavua. Ei kolmannen osapuolen rajapintoja, ei päivityksiä, jotka rikkovat typografiasi.

Jos käytät jo lapsiteemaa, manuaalinen tapa istuu luontevasti osaksi CSS:ääsi. Fonteista tulee osa teemaa, ja ne säilyvät siellä vuosia.

Tapa 2: manuaalinen asennus @font-facella

@font-face-direktiivi yhdistää fonttitiedostot suoraan palvelimeltasi. Tuetut formaatit ovat TTF, OTF, WOFF, WOFF2 ja SVG. Jokainen leikkaus tarvitsee oman koodilohkonsa.

Mutta asennuksen jälkeen unohdat typografian vuosiksi: WordPress- ja teemapäivitykset eivät vaikuta fontteihin, ne sijaitsevat child-teemassasi ja latautuvat joka kerta osana CSS:ää.

Ennen aloittamista luo child-teema: kaikki muokkaukset menevät sinne, pääteema pysyy koskemattomana ja päivittyy ilman, että muutoksesi katoavat.

Vaihe 1: luo kansio fonteille

Luo child-teeman kansioon fonts-hakemisto. Lisää se FTP:llä tai palveluntarjoajan tiedostonhallinnalla:

1
wp-content/themes/your-child-theme/fonts/

Jos child-teemasi nimi on twentytwentyfour-child, polku on wp-content/themes/twentytwentyfour-child/fonts/.

Vaihe 2: lataa fonttitiedostot palvelimelle

Kopioi ladatut tiedostot fonts-kansioon FTP:llä tai palveluntarjoajan tiedostonhallinnalla. Jokaiselle leikkaukselle oma tiedostonsa:

1
fonts/WebFont.woff2
2
fonts/WebFont.woff
3
fonts/WebFont-Bold.woff2
4
fonts/WebFont-Bold.woff
5
fonts/WebFont-Italic.woff2
6
fonts/WebFont-Italic.woff

Käytännössä WOFF- ja WOFF2-formaatit riittävät: ne kattavat kaikki modernit selaimet ja painavat vähemmän kuin TTF. MDN Web Doksin mukaan WOFF2 pakkaa fontin 30% tehokkaammin kuin WOFF, ja kaikki selaimet ovat tukeneet sitä vuodesta 2016 lähtien.

Selain valitsee sopivan formaatin yhdistetyistä: jos se tukee WOFF2:ta, se lataa sen, jos ei, se ottaa WOFFin.

Vaihe 3: lisää @font-face style.css-tiedostoon

Avaa child-teeman style.css ja lisää koodi teeman otsikkotietojen (teeman nimen ja kuvauksen sisältävä kommentti) jälkeen. Aloita normaalilla leikkauksella:

1
@font-face {
2
    font-family: 'MyWebFont';
3
    src: url('fonts/WebFont.woff2') format('woff2'),
4
         url('fonts/WebFont.woff') format('woff');
5
    font-weight: normal;
6
    font-style: normal;
7
}

font-family on fontin nimi, jota käytät CSS:ssä. Nimeä se niin, ettet sekoita sitä järjestelmäfontteihin: ei Arial, vaan MyBrandSans tai BrandHeading. src on polku tiedostoihin suhteessa style.css-tiedostoon. Järjestyksellä on väliä: WOFF2 ensin (kevyin), WOFF toisena (varavaihtoehto vanhemmille selaimille).

Vaihe 4: lisää kursiivi

1
@font-face {
2
    font-family: 'MyWebFont';
3
    src: url('fonts/WebFont-Italic.woff2') format('woff2'),
4
         url('fonts/WebFont-Italic.woff') format('woff');
5
    font-weight: normal;
6
    font-style: italic;
7
}

Huomaa: font-family on sama, font-weight pysyy normaalina ja font-style muuttuu kursiiviksi. Selain korvaa oikean tiedoston em-tagille ja font-style: italic -ominaisuudelle.

Vaihe 5: lisää lihavoitu leikkaus

1
@font-face {
2
    font-family: 'MyWebFont';
3
    src: url('fonts/WebFont-Bold.woff2') format('woff2'),
4
         url('fonts/WebFont-Bold.woff') format('woff');
5
    font-weight: bold;
6
    font-style: normal;
7
}

Tässä font-style on taas normaali ja font-weight on nyt bold. Nyt strong-tagi ja font-weight: bold -ominaisuus renderöityvät lihavoidulla tiedostollasi, eivät selaimen tekolihavoinnilla. Ero on huomattava: oikea lihavoitu leikkaus on fonttisuunnittelijan tasapainottama, tehty näyttää karkealta.

Vaihe 6: lihavoitu kursiivi (valinnainen)

1
@font-face {
2
    font-family: 'MyWebFont';
3
    src: url('fonts/WebFont-BoldItalic.woff2') format('woff2'),
4
         url('fonts/WebFont-BoldItalic.woff') format('woff');
5
    font-weight: bold;
6
    font-style: italic;
7
}

Neljä leikkausta kattaa käytännössä kaikki tavallisen sivuston typografiset tarpeet. Jos suunnittelu ei vaadi lihavoitua kursiivia, ohita tämä vaihe: tiedosto ei lataudu, ennen kuin CSS nimenomaisesti pyytää bold + italic -yhdistelmää.

Vaihe 7: ota fontti käyttöön elementeissä

Lisää @font-face-säännön jälkeen säännöt, jotka määrittävät fontin tietyille elementeille. Lisää child-teeman style.css-tiedostoon:

1
body {
2
    font-family: 'MyWebFont', Arial, sans-serif;
3
}
4
 
5
h1, h2, h3 {
6
    font-family: 'MyWebFont', Georgia, serif;
7
}

Ensimmäinen sääntö: fonttisi leipätekstille, varavaihtoehtona järjestelmän Arial. Toinen: sama fontti otsikoille, varavaihtoehtona Georgia.

Jos fonttitiedosto ei lataudu (palvelin on alhaalla tai polku on väärä), sivusto ei jää ilman tekstiä: selain näyttää Arialin tai Georgian. Varavaihtoehto on pakollinen: ilman sitä selain käyttää järjestelmän oletusfonttia, yleensä Times New Romania, ja typografia hajoaa.

Valmista. Mukautettu fontti on käytössä ilman lisäosia ja ulkoisia palveluita. Typografia asuu omalla palvelimellasi eikä hajoa, jos kolmannen osapuolen rajapinta muuttaa ehtojaan tai kaatuu.

Video: vaiheittainen asennus live-sivustolla

Katso, miltä koko prosessi näyttää oikealla WordPress-sivustolla fontin valinnasta sen käyttöönottoon otsikoissa:

Video näyttää molemmat tavat: lisäosan kautta ja @font-face-säännöllä. Video on kätevä pysäyttää ja seurata mukana. Video on englanniksi, mutta prosessi on visuaalisesti selkeä myös ilman ääntä.

⁉️🤔 Usein kysytyt kysymykset

Kuinka monta mukautettua fonttia voin lisätä sivustolle?

Enintään kaksi: yksi otsikoille, toinen leipätekstille. Jokainen fontti sisältää useita leikkaus-tiedostoja, joiden koko on 30-100 kt. Kaksi fonttia lisää jo huomattavasti sivun latauskokoa. Kolmas heikentää nopeutta selvästi, etenkin hitailla mobiiliyhteyksillä.

Onko lapsiteeman luominen pakollista @font-face-säännölle?

Muodollisesti ei: voit lisätä @font-face-säännön suoraan pääteeman style.css-tiedostoon. Mutta seuraavan teemapäivityksen jälkeen kaikki muokkaukset katoavat. Lapsiteema ratkaisee tämän kertaluonteisesti. Jos et ole vielä luonut sellaista, WordPress-lapsiteemaoppaamme opastaa asennuksesta ensimmäiseen tulokseen.

Mikä tiedostomuoto kannattaa valita: WOFF, WOFF2 vai TTF?

WOFF2 ensisijaisesti. Se pakkaa fontin huomattavasti WOFFia tehokkaammin, ja kaikki nykyaikaiset selaimet tukevat sitä. WOFF toimii varavaihtoehtona vanhemmille selainversioille. Yhdistä TTF ja OTF vain, jos fonttia ei ole saatavilla web-muodoissa: ne eivät ole pakattuja ja painavat kaksinkertaisesti. Järjestys src-määrittelyssä on aina: WOFF2, sitten WOFF.

Miksi fontti ei näy asennuksen jälkeen?

Kolme yleistä syytä. Ensimmäinen: tiedostopolku url()-kohdassa on väärin, tarkista, että polku on rakennettu style.css-tiedostosta, ei sivuston juuresta. Toinen: selaimen välimuistissa on vanha CSS, avaa sivusto incognito-tilassa tai tyhjennä välimuisti painamalla Ctrl+F5. Kolmas: ristiriita teeman kanssa, joka ylikirjoittaa font-family-määrittelyn korkeammalla prioriteetilla, tarkista selaimen tarkastustyökalusta, mitä CSS-sääntöä tekstiin todellisuudessa sovelletaan.

Tarvitseeko format()-määrettä käyttää src-kohdassa?

Muodollisesti selain tunnistaa formaatin itse tiedoston otsikkotiedoista. Mutta nimenomainen format('woff2') nopeuttaa valintaa: selain ei lataa tiedostoa, jota se ei varmasti tue. Määritä se siis aina. Tämä on CSS Fonts Level 4 -spesifikaation suositus.

Miten tarkistan, että fontti latautuu omalta palvelimeltani eikä ulkoisesti?

Avaa DevTools (F12), Network-välilehti, Fonts-suodatin, päivitä sivu. Listalla tulisi näkyä vain tiedostoja omasta verkkotunnuksestasi. Jos näet fonts.googleapis.com- tai fonts.gstatic.com-osoitteita, Google Fonts -fontit latautuvat ulkoisesti. GDPR-vaatimusten täyttämiseksi siirrä ne paikalliseen isännöintiin Fonts Plugin Pro -lisäosalla tai lataa manuaalisesti ja yhdistä @font-face-säännöllä.

Kumpi fontin yhdistämistapa kannattaa valita?

Molemmat tavat toimivat luotettavasti. Valinta riippuu siitä, kumpi on sinulle tärkeämpää: asennuksen nopeus vai täysi hallinta jokaisesta tavusta.

Jos asennat fonttia ensimmäistä kertaa etkä halua koskea koodiin, valitse Use Any Font. Latasit tiedoston, määritit sen otsikoille, valmista. Ilmaisversio riittää yhdelle brändifontille otsikoissa.

Jos tarvitset pääsyn Google Fonts -valikoimaan ja live-esikatselun suoraan muokkausnäkymässä, valitse Fonts Plugin. Ilmaisversio riittää useimpiin tarpeisiin, Pro-versiota tarvitaan vain Google Fonts -fonttien paikalliseen isännöintiin GDPR:n mukaisesti.

Jos työskentelet jo lapsiteeman kanssa ja olet tottunut muokkaamaan CSS:ää käsin, valitse @font-face. Ei ulkoisia riippuvuuksia, täysi hallinta, ja asennuksen jälkeen et mieti typografiaa vuosiin. Teemapäivitykset eivät vaikuta fontteihin, ne elävät lapsiteemassasi osana CSS:ää.

Aloita lisäosalla: se vie 2 minuuttia eikä sisällä riskejä. Mikä fontti sivustollasi on nyt, teeman oletusfontti vai oletko jo yhdistänyt oman?