Mukautettujen Fonttien Lisääminen
Pyyhkäise näyttääksesi valikon
Fontit vaikuttavat merkittävästi verkkosivuston ulkoasuun ja tunnelmaan. Laadukas typografia parantaa luettavuutta ja tekee suunnittelusta mieleenpainuvamman. Monet fontit ovat ilmaisia, kun taas toiset vaativat lisensoinnin – noudata aina tekijänoikeussääntöjä.
Google Fonts -palvelu
Saatavilla on monia kiinnostavia fontteja ilmaiseksi. Tutustutaan https://fonts.google.com/ -palvelun tarjoamiin vaihtoehtoihin. Google-fontin lisääminen merkkauskieleen on helppoa.
Ajetaan ensin seuraava esimerkki, jossa käytetään oletusfonttia. p-elementillä on seuraavat ominaisuudet: font-family (fontin nimi), font-size (fontin koko) ja font-weight (fontin lihavuus).
index.html
styles.css
Font-family-ominaisuus ei toimi, koska projektimme ei vielä tunne "DM Sans" -mukautettua fonttia. Lisätään fontti projektiin käyttämällä https://fonts.google.com/.
Napsauta kuvaa nähdäksesi yksityiskohdat selkeämmin.
"Search fonts" -hakukenttään kirjoita tarvitsemasi fontin nimi. Tässä tapauksessa se on "DM Sans." Kun fontti tulee näkyviin, napsauta "DM Sans" -korttia.
Fontin sivulla napsauta "Get font" -painiketta.
Seuraavaksi napsauta "Get embed code" -painiketta.
Lopuksi kopioi linkki ja liitä se projektisi HTML-tiedostoon <head>-elementin sisälle. On tärkeää lisätä linkki ennen omaan tyyliisi viittaavaa linkkiä. Näin selain lataa ensin mukautetut fontit ennen kuin se käyttää niitä hyödyntäviä tyylejä. Kun olet lisännyt linkin, "DM Sans" on käytettävissä mukautettuna fonttina projektissasi. Suoritetaan nyt projekti ja varmistetaan, että kaikki toimii oikein.
index.html
styles.css
Voimme havaita eron mukautetun fontin ja oletusfontin välillä. Lisäksi jokaisella selaimella on omat oletusfonttinsa. Siksi on tärkeää osata käyttää mukautettuja fontteja verkkosivustolla.
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
