Roboto pealkirjades, Open Sans sisutekstis. Saidi tüpograafia näeb välja nagu pooltes WordPressi installatsioonides. Külastaja märkas mustrit, tundis fondi ära ja sait kaotas osa oma eripärast juba enne esimest lõiku.

Kohandatud fondi saab WordPressiga ühendada kahel viisil: pistikprogrammi abil kahe minutiga ilma ühegi koodireata või käsitsi @font-face kaudu, omades täielikku kontrolli failide üle. Mõlemad töötavad usaldusväärselt, valik sõltub sinu CSS-i kogemusest.

Allpool käsitleme, kust fonte hankida, kuidas pistikprogrammi seadistada ja kuidas lisada @font-face alamteemas. Kood pärineb töötavatelt installatsioonidelt: kopeeri see, asenda failinimi ja sinu tüpograafia on valmis.

💡 Kiirülevaade:

• Laadi fond alla DaFontist või FontSquirrelist WOFF2 või TTF vormingus: vähemalt kolm paksust (tavaline, rasvane, kursiiv).
• Paigalda Use Any Font või Fonts Plugin, laadi fail läbi administraatori paneeli üles ja määra font elementidele. Koodi pole vaja.
• Või ühenda käsitsi: loo alamteemas fonts kaust, laadi failid FTP kaudu üles ja lisa @font-face failis style.css iga paksuse jaoks.
• Kontrolli kuvamist mitmes brauseris ja ära paigalda rohkem kui kahte kohandatud fonti: iga fail suurendab lehe mahtu.

Kust fonte hankida ja mis vormingus

Kõik teavad Google Fontsi, mistõttu ongi neid igal pool. Kui vajad midagi vähem kulunud, siis siin on kolm tõestatud allikat.

DaFont pakub üle 3500 fondi kategooriatega koomiksitest vintage'ini. Enamik on isiklikuks kasutamiseks tasuta. Äriprojektide puhul kontrolli iga faili litsentsi eraldi, need on kirjas fondi lehel.

FontSquirrel keskendub tasuta fondidele ärilitsentsidega. Kollektsioon on väike, kuid iga fondi on juristid üle kontrollinud. Sisseehitatud generaator teisendab allalaaditud faili ühe klõpsuga WOFF-iks ja WOFF2-ks.

FontSpring müüb tasulisi fonte, kuid peaaegu igal perekonnal on üks või kaks tasuta paksust. Enne allalaadimist loe litsents hoolikalt läbi: erinevatel paksustel võivad olla erinevad tingimused.

Üldreegel: ära pane saidile rohkem kui kahte kohandatud fonti. Üks pealkirjadele, teine sisutekstile, sellest piisab. Iga fail lisab HTTP-päringu ja suurendab lehe mahtu 30-100 KB võrra.

Laadi kõik paksused korraga alla: tavaline, rasvane, kursiiv ja rasvane kursiiv. Kui failil on ainult üks paksus, teeskleb brauser rasvast ja kursiivi kunstliku jämedamaks muutmisega, tulemus näeb robustne välja.

Meetod 1: pistikprogramm 2 minutiga

Pistikprogramm, kõige lihtsam tee. Paigaldatud, fondifail üles laaditud, valitud, kuhu seda rakendada. Pole koodi, pole FTP-ühendusi.

Use Any Font

🔗 Use Any Font WordPress.org-is

🔗 Ekraanipildid ja demo

Laeb üles fonte TTF-, OTF- ja WOFF-vormingus, teisendab need automaatselt Brotli tihendusega WOFF2-vormingusse. WordPress.org-i pistikprogrammi lehe andmetel kiireneb laadimine ligikaudu 30%. Fondid salvestatakse sinu serverisse: GDPR-i nõuetele vastavus on kohe olemas, pärast teisendamist puudub sõltuvus välistest API-dest.

Pärast paigaldamist saad API-võtme (tasuta Lite-võti annab ühe teisenduse), laed faili üles ja määrad fondi visuaalse liidese kaudu. Saad selle administraatori paneelist otse määrata pealkirjadele, lõikudele või konkreetsetele plokkidele.

Toetab integratsiooni Elementoriga, Diviga, WPBakeryga, Gutenbergiga: määra font üks kord pistikprogrammis ja see ilmub leheehitaja fondiloendisse.

Märkus: mitme fondi jaoks on vaja Premium-võtit. Tüüpilise saidi jaoks piisab tasuta versioonist: üks brändifont pealkirjadele, Google Fonts tekstile.

Fonts Plugin

🔗 Fonts Plugin WordPress.org-is

🔗 Pistikprogrammi ekraanipildid

Endine Olympus Google Fonts: ümber nimetatud, funktsionaalsust laiendatud. Pistikprogrammi lehe andmetel on sellel üle 200 000 aktiivse paigalduse ja viie tärni hinnang enam kui 1200 kasutajalt. Toetab Google Fontsi, Adobe Fontsi (Typekit) ja kohandatud failide üleslaadimist.

Seadistamine käib kohandaja kaudu: vali font, vaata reaalajas eelvaadet, salvesta.

Pro-versioon lisab Google Fontide lokaalse hostimise GDPR-i jaoks, ainult vajalike paksuste valikulise laadimise ning suuruse, värvi ja reavahe juhtimise. Enamiku saitide jaoks piisab tasuta versioonist.

Pistikprogramm või käsitsi: millal mida valida

Pistikprogramm võidab kiiruses: 2-minutiline paigaldus, koodi pole vaja. Kuid sa sõltud pistikprogrammi uuendustest ja selle ühilduvusest WordPressi versiooniga.

Käsitsi paigaldamine @font-face kaudu on seadistamise mõttes keerulisem, kuid sa kontrollid iga baiti. Ei mingeid kolmandate osapoolte API-sid ega uuendusi, mis su tüpograafia lõhuksid.

Kui sa juba töötad alamteemaga, siis sobib käsitsi meetod sinu CSS-i orgaaniliselt. Fondid muutuvad teema osaks ja püsivad seal aastaid.

2. Meetod: käsitsi paigaldamine @font-face abil

@font-face direktiiv ühendab fondifailid otse sinu serverist. Toetatud formaadid on TTF, OTF, WOFF, WOFF2 ja SVG. Iga kirjakaal vajab eraldi koodiplokki.

Kuid pärast seadistamist unustad tüpograafia aastateks: WordPressi ja teema uuendused ei mõjuta fonte, need asuvad sinu alamteemas ja laaditakse iga kord CSS-i osana.

Enne alustamist loo alamteema: kõik muudatused lähevad sinna, peateema jääb puutumata ja uueneb ilma sinu muudatusi kaotamata.

1. Samm: loo fontide jaoks kaust

Loo alamteema kaustas fonts kataloog. Lisa see FTP või hostingu failihalduri kaudu:

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

Kui sinu alamteema nimi on twentytwentyfour-child, on tee wp-content/themes/twentytwentyfour-child/fonts/.

2. Samm: laadi fondifailid serverisse

Kopeeri allalaaditud failid FTP või hostingu failihalduri kaudu fonts kausta. Iga kirjakaalu jaoks eraldi fail:

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

Praktikas piisab WOFF ja WOFF2 formaatidest: need katavad kõik kaasaegsed brauserid ja kaaluvad vähem kui TTF. MDN Web Docsi andmetel pakib WOFF2 fonti 30% tõhusamalt kui WOFF ja seda toetavad kõik brauserid alates 2016. aastast.

Brauser valib ühendatud formaatide seast sobiva: kui see toetab WOFF2, laadib selle, kui mitte, võtab WOFF-i.

3. Samm: lisa @font-face faili style.css

Ava alamteema style.css ja lisa kood pärast teema päist (kommentaar teema nime ja kirjeldusega). Alusta tavalise kirjakaaluga:

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 fondi nimi, mida kasutad CSS-is. Nimeta see nii, et sa ei ajaks seda süsteemifontidega segi: mitte Arial, vaid MyBrandSans või BrandHeading. src on failide tee style.css suhtes. Järjekord on oluline: esmalt WOFF2 (kergem), teisena WOFF (varuvariant vanematele brauseritele).

4. Samm: lisa kaldkiri

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
}

Pane tähele: font-family on sama, font-weight jääb normaalseks ja font-style muutub kaldkirjaks. Brauser asendab em sildi ja font-style: italic omaduse jaoks õige faili.

5. Samm: lisa rasvane kirjakaal

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
}

Siin on font-style jälle normaalne ja font-weight on nüüd bold. Nüüd kuvatakse strong silt ja font-weight: bold omadus sinu rasvase failiga, mitte brauseri võltsitud jämedusega. Erinevus on märgatav: ehtne rasvane kirjakaal on fondidisaineri poolt tasakaalustatud, võltsing näeb robustne välja.

6. Samm: rasvane kaldkiri (valikuline)

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
}

Neli kirjakaalu katavad praktiliselt kõik tavalise saidi tüpograafilised ülesanded. Kui kujundus ei nõua rasvast kaldkirja, jäta see samm vahele: faili ei laadita enne, kui CSS seda bold + italic kombinatsiooni otseselt nõuab.

7. Samm: rakenda font elementidele

Pärast @font-face-i lisa reeglid, mis määravad fondi konkreetsetele elementidele. Lisa alamteema style.css-i:

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

Esimene reegel: sinu font sisutekstile, varuvariandina süsteemne Arial. Teine: sama font pealkirjadele, varuvariandina Georgia.

Kui fondifail ei laadi (server on maas või tee on vale), ei jää sait tekstita: brauser kuvab Ariali või Georgiat. Varuvariant on kohustuslik: ilma selleta asendab brauser fondi süsteemse vaikefondiga, tavaliselt Times New Roman, ja tüpograafia laguneb koost.

Valmis. Kohandatud font on ühendatud ilma pluginateta ja väliste teenusteta. Tüpograafia elab sinu serveris ega purune, kui kolmanda osapoole API muudab tingimusi või läheb rivist välja.

Video: samm-sammuline seadistamine reaalsel saidil

Vaata, kuidas kogu protsess reaalsel WordPressi saidil välja näeb alates fondi valimisest kuni selle rakendamiseni pealkirjadele:

Video näitab mõlemat meetodit: nii pluginaga kui ka @font-face abil. Mugav on pausile panna ja kaasa teha. Video on inglise keeles, kuid protsess on visuaalselt selge ka ilma helita.

⁉️🤔 Korduma kippuvad küsimused

Mitu kohandatud fonti saan saidile lisada?

Mitte rohkem kui kaks: üks pealkirjadele, teine sisutekstile. Iga font koosneb mitmest kaalufailist suurusega 30 kuni 100 KB. Kaks fonti lisavad lehe laadimisele märgatava mahu. Kolmas halvendab kiirust juba tuntavalt, eriti aeglaste mobiilsideühenduste puhul.

Kas @font-face jaoks on alamteema loomine kohustuslik?

Formaalselt ei: @font-face saab lisada otse peateema style.css faili. Kuid järgmise teemauuenduse järel kaovad kõik muudatused. Alamteema lahendab selle lõplikult. Kui te pole seda veel loonud, siis meie WordPressi alamteema juhend viib teid paigaldamisest esimese tulemuseni.

Millist failivormingut valida: WOFF, WOFF2 või TTF?

WOFF2, eelistatult. See pakib fondi tunduvalt rohkem kokku kui WOFF ja seda toetavad kõik kaasaegsed brauserid. WOFF, varuvariandina vanemate brauseriversioonide jaoks. TTF ja OTF ühendage ainult siis, kui font pole veebivormingutes saadaval: need pole pakitud ja kaaluvad kaks korda rohkem. Järjekord src sees on alati: WOFF2, seejärel WOFF.

Miks font pärast paigaldamist ei kuvata?

Kolm levinumat põhjust. Esiteks: faili asukoht url() sees on vale, kontrollige, et tee oleks üles ehitatud style.css suhtes, mitte saidi juurest. Teiseks: brauseri vahemälu hoiab vana CSS-i, avage sait inkognito režiimis või tühjendage vahemälu klahvidega Ctrl+F5. Kolmandaks: konflikt teemaga, mis kirjutab font-family kõrgema prioriteediga üle, kontrollige inspektoris, milline CSS-i selektor tegelikult tekstile rakendub.

Kas src sees on vaja määrata format()?

Formaalselt tuvastab brauser vormingu ise failipäistest. Kuid selgesõnaline format('woff2') kiirendab valikut: brauser ei laadi alla faili, mida ta kindlasti ei toeta. Seega määrake see alati. See on CSS Fonts Level 4 spetsifikatsiooni soovitus.

Kuidas kontrollida, et font laaditakse minu serverist, mitte väliselt?

Avage DevTools (F12), vahekaart Network, filter Fonts, värskendage lehte. Nimekirjas peaksid olema ainult teie domeenist pärinevad failid. Kui näete fonts.googleapis.com või fonts.gstatic.com, laaditakse Google Fonts väliselt. GDPR-i nõuete täitmiseks viige need kohalikule majutusele Fonts Plugin Pro abil või laadige käsitsi alla ja ühendage @font-face kaudu.

Millist fondi ühendamise meetodit valida?

Mõlemad meetodid töötavad usaldusväärselt. Valik sõltub sellest, mis on teile olulisem: seadistamise kiirus või kontroll iga baidi üle.

Kui paigaldate fonti esimest korda ega taha koodi puutuda, valige Use Any Font. Laadisite faili üles, määrasite pealkirjadele, valmis. Tasuta versioonist piisab ühe brändifondi jaoks pealkirjadel.

Kui vajate juurdepääsu Google Fonts kataloogile koos eelvaatega otse kohandajas, valige Fonts Plugin. Tasuta versioonist piisab enamiku ülesannete jaoks, Pro on vajalik ainult Google Fonts kohalikuks majutamiseks GDPR-i raames.

Kui töötate juba alamteemaga ja olete harjunud CSS-i käsitsi muutma, valige @font-face. Null välist sõltuvust, täielik kontroll ja pärast seadistamist ei mõtle te tüpograafiale aastaid. Teemauuendused fonte ei mõjuta, need elavad teie alamteemas CSS-i osana.

Alustage pluginast: see võtab 2 minutit ja sellega ei kaasne riske. Mis font on teie saidil praegu, kas teema vaikefont või olete juba oma fondi ühendanud?