Kuinka tallentaa fontit paikallisesti WordPressiin Elementor PRO lisäosalla

Violetti Google fontti

Jaa tämä julkaisu

Oletko koskaan miettinyt, miten voit parantaa WordPress-sivustosi suorituskykyä ja tietosuojaa? Yksi tehokas tapa on tallentaa ja jakaa Google Fontit paikallisesti Elementor PRO -lisäosan avulla. Tämä ei ainoastaan nopeuta sivustosi latausaikoja, vaan myös parantaa tietosuojaa ja auttaa noudattamaan GDPR-säädöksiä.

Kun fontit ladataan suoraan omalta palvelimeltasi, käyttäjät pääsevät nauttimaan nopeammasta ja sujuvammasta käyttökokemuksesta. Lisäksi, kun vältät tietojen jakamisen kolmansien osapuolten kanssa, voit olla varma, että sivustosi on tietoturvallinen ja käyttäjien luottamus säilyy.

Yhdistämällä WordPressin Elementor PRO lisäosan ja välimuistilisäosan, kuten LiteSpeed Cache tai Accelerate WP hyödyt, sivustostasi tulee entistäkin käyttäjäystävällisempi ja nopeampi. Kun käytät välimuistilisäosaa fonttien esilataukseen, lisäosa lisää automaattisesti tarvittavat preload-komennot sivustosi HTML-koodiin. Tämä varmistaa, että fontit ovat valmiina käytettäväksi heti, kun niitä tarvitaan, mikä vähentää viivettä ja estää fonttien välkkymisen (FOIT, Flash of Invisible Text).

1. Lataa Google Fontit tiedostona

Siirry osoitteeseen https://fonts.google.com/ ja etsi sopiva tai valittu fontti.

Visio Sites Oy käyttää verkkosivustolla Work Sans ja Roboto -fontteja.

Lataa Roboto fontti osoitteesta fonts.google.com

Paina ensiksi ”Get Font”.

Etsi hakutoiminta käyttämällä myös muut haluamasi fontit ja paina ”Get Font”.

Kun olet löytänyt kaikki tarvitsemasi Google Fontit, paina ”Download Al”.

Yllä olevasta kuvasta voit huomata, että Work Sans -fontti on tyyppiä Variable ja Roboto tyyppiä Static. Variable-fontit ja static-fontit eroavat toisistaan merkittävästi. Variable-fontit sisältävät kaikki fonttivariantit yhdessä tiedostossa, kun taas static-fontit vaativat jokaiselle variantille oman tiedoston. Tämä tekee variable-fonteista tehokkaampia ja nopeampia, koska ne vähentävät HTTP-pyyntöjen määrää ja parantavat sivuston latausaikoja. Lisäksi variable-fontit tarjoavat laajemman valikoiman typografisia muunnelmia ja tukevat CSS-animaatioita, mikä mahdollistaa sujuvammat ja dynaamisemmat typografiset efektit. Tiivistettynä, variable tyypin fontit ovat tehokkaampia ja parempia.

Kun fontit ovat ladattu, pura zip-tiedosto. Ainoastaan .ttf tyypin tiedostoja tarvitaan.

2. Lataa fontit Elementor Pro Custom Fonts osioon

Siirry WordPress hallintapaneeliin ja paina Elementor -> Custom Fonts.

WordPress hallintapaneelista voit lisätä muokattuja fontteja suoraan Elementor Pro lisäosaan.

Variable fontin lisääminen Elementor Pro lisäosaan

Nimea fonttisi ja paina ”Add new font”. Lataa fontin .ttf tiedosto (esim WorkSans-VariableFont_wght.tff) mediakirjastosi kautta ja paina ”Julkaise”.

Static fontin lisääminen Elementor Pro lisäosaan

Staattisen fontin lisääminen Elementor Pro lisäosaan tapahtuu hyvin samalla tavalla, kun Variable tyyppisen fontin. Tässä tulee kuitenkin ottaa huomioon, että tehokkainta on ladata sivustollesi ainoastaan ne fontin vahvuudet, joita sivustollasi tarvitset. Itse käytän ainoastaan staattisen Roboto fontin vahvuuksia 400 ja 500 sivustollani.

Tehokkainta on ladata sivustollesi ainoastaan ne fontin painot, joita käytät.

3. Aseta sivustolle ladatut fontit yleisiksi fonteiksi

Visiosites.fi sivuston asetukset

Siirry Elementor PRO -lisäosan sivuston asetukset osioon. Ja valitse yleiset kirjaisimet

Elementor PRO yleiset fontit

Aseta jokaisen fonttisi kirjaisinperheeksi aiemmin lataamasi static font tai variable font.

Nyt Google fontit ovat ladattu suoraan sivustollesi, josta jakelet niitä tehokkaammin

Muita kirjoituksia WordPressiin liittyen

Visio Sites Blogi

Miten valita verkkotunnus?

Verkkotunnuksen valinta on tärkeä osa minkä tahansa verkossa tarjottavan palvelun aloittamista. Miten valita mahdollisimman hyvä...
Violetti Google fontti

Kuinka tallentaa fontit paikallisesti WordPressiin Elementor PRO lisäosalla

Kuinka tallentaa sekä jaella Google fontit paikallisesti WordPress verkkosivustoon Elementor PRO lisäosan avulla....