Google-fonttien upottaminen Wordpress-sivustoon

Google Fontsista tuli mukautetun verkkotypografian tärkein resurssi sen kehittämisestä vuonna 2010 lähtien. On kolme tärkeintä syytä, miksi Googlesta tuli edelläkävijä täällä. Ensinnäkin ei ollut tarpeeksi kunnollisia kirjasinpalveluita, joten Google täytti tyhjiön. Toiseksi, jo alussa heidän tarjoamansa valikoima oli verrattain suurta. Tällä hetkellä saatavilla on yli 800 kirjasinta useissa tyyleissä. Kolmanneksi nämä fontit ovat saatavilla ilmaiseksi, mikä tekee niistä erityisen houkuttelevia.

Lisäksi ne on yllättävän helppo integroida suunnitteluprojekteihisi. Näytämme sinulle, kuinka voit sisällyttää nämä Google-kirjasimet WordPress-sivustollesi.

Google-kirjasimet

Aluksi sinun on valittava fontti, jonka kanssa haluat työskennellä. Vaihtoehtoja on useita, joten sinulla on melko laaja valikko, josta valita. Löydät ne siirtymällä osoitteeseen Googlen kirjasinsivu. Jos etsit tiettyä kirjasinta, kirjoita vain fontin nimi Hakukenttään, niin sen pitäisi saada esimerkki.

Voit käyttää myös muita hakuparametreja. Hakukentän alapuolella on painike nimeltä Luokat. Jos napsautat tätä, se paljastaa pudotusvalikon, jossa on viisi vaihtoehtoa. Nämä ovat seuraavat:

  • Serif – Nämä ovat kirjasimia, joissa on lyhyet viivat, jotka johtuvat kirjaimen ylä- ja alaviivasta. Times New Roman ja Sylfaen ovat hyviä esimerkkejä.
  • Sans Serif – Kuten nimestä voi päätellä, nämä ovat fontteja ilman niitä pieniä viivoja. Niillä on yleensä yksinkertainen ja puhdas estetiikka.
  • Näyttö – Näitä voidaan kutsua huomiota herättäviksi fonteiksi. Ne sopivat parhaiten otsikoiksi pitkän tekstin sijaan.
  • Käsinkirjoitus – Nämä fontit näyttävät siltä, ​​että joku olisi kirjoittanut ne käsin. Huomaat, että monet ovat kursiivisesti tai niiden välit ovat vähemmän yhdenmukaisia.
  • Monospace – Kuten kirjoituskoneessa, niiden kirjaimet ovat vaakasuorassa leveydellä. Ne on sijoitettu hyvin tasaisesti.

Näiden lisäksi sinulla on myös muita vaihtoehtoja, joista valita, kuten valita kieli- ja fonttiominaisuudet. Jälkimmäinen sisältää tyylien määrän, paksuuden, vinon ja leveyden.

Fonttien upottaminen WordPressiin

Jos haluat sisällyttää nämä ainutlaatuiset kirjasimet WordPress-sivustollesi, voit kokeilla useita tapoja.

CSS: n käyttö

Napsauta Fonttia Googlen valinnasta, ja se vie sinut yksityiskohtaiselle kirjasinsivulle. Oikeassa yläkulmassa on +-merkki. Napsauta sitä ja sivuikkuna avautuu. Napsauta "Upota".

Nyt voit napsauttaa @tuonti. Tämä avaa CSS-koodin, joka sinun on kopioitava. Siirry WordPress-teeman tyylitaulukkoon ja liitä se alkuun. Varmista, että olet kopioinut tuontilinkin ilman  suluissa. Varmista, että tallennat, niin olet lisännyt fontin.

PHP: n käyttö

Noudata muutamaa ensimmäistä vaihetta ja kopioi linkki, jonka saat napsautettuasi plusmerkkiä. Lisää se nyt vain teemasi header.php-tiedostoon. Muista tallentaa, jotta fontti voidaan lisätä.

Javascript-funktion käyttäminen

Voit myös kokeilla "jonoamista". Sinun on käytettävä wp_enqueue_style-funktiota tätä varten. Tällä menetelmällä voit lisätä valitun fontin kaikkien verkkosivustosi sivujen otsikkoosioon. Se on loistava tapa lisätä useita muutoksia kerralla.

Hanki vain kirjasimen linkki (http -merkkiin asti ) ja lisää se teemasi functions.php -tiedostoon ylimääräisen koodin ympärillä. Tässä on koodi, jota sinun on käytettävä:

funktio custom_add_google_fonts() {

wp_enqueue_style( 'custom-google-fonts', https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap, epätosi );

}

add_action( 'wp_enqueue_scripts', 'custom_add_google_fonts' );

Jokainen näistä vaihtoehdoista toimii mainiosti Google-kirjasinten integroimiseksi WordPress-verkkosivustoosi, joten on tärkeää valita se, josta pidät eniten.