DreamWeaverin fontteja ei kannata käyttää, vaan hae esim. google.fonts´ista

https://fonts.google.com/                   

Tässä Google-fontsien hakuohje:

  • Kokeile eri hakuvaihtehtoja jos haluat… kirjoita tuohon yläriville jotain tekstiä, käytä ääkkösiä niin näet toimiiko ne…
  • Hakukriteerejä voi laittaa, ja voi katsoa, miltä näyttää eri koko, kokonainen kappale jne

(Fonttiperheen lataus itselle omaan koneeseen klikkaamalla Download family. Tämä on tässä muuten vaan vinkkinä, että täältä saa omalle koneelle fontteja. Nettisivuja varten fonttitiedostoja ei tarvitse ladata koneeseen.)

  • Klikataan valitut kirjainleikkaukset. Kaikkia ei kannata valita, vain ne joita tarvitsee. Ota myös kursiivi ja bold fonttileikkaukset, jos niitä käytät nettisivulla. Ilmestyvät oikealle laatikkoon, jonka saa  auki tuosta ruutuikonista missä on punainen piste.
  • Klikataan Embed-välilehti auki ja sieltä klikataan auki @import välilehti auki
  • Kopioi style-tagien välissä oleva testi (ei siis niitä style-tageja tarvita)
  • Lliitetään se kopioitu teksti heti CSS-tyylitiedoston alkuun
  • Kopioi seuraavaksi alemmasta laatikosta oleva teksti ja sijoita CSS:äään kohtaan, jolle haluat fontin määritellä, esim. body tai h1

(Fontteja ja fonttileikkauksia voi olla usempi samassa, tai ne voi laittaa erillisinä)

Fonteista

serif = pääteviivallinen eli antiikva
sans-serif = pääteviivaton eli groteski
monospace = tasalevyinen
handwriting tai kursiivi = käsinkirjoitus
fantasy = fantasiafontti

Fonttien muotoilusta nettisivulla

Eri selaimet voivat näyttää eri tavalla erikoistehosteet, esim. varjostuksen. Erikoistehosteiden käytölle nettisivuilla ei juuri koskaan ole todellista tarvetta.

Tekstin muuttaminen suur- tai pienaakkosiksi

CSS:ssä: Text-transform:
capitalize         Jokaisen sanan 1 kirjain suuraakkosiksi, versaaleiksi
uppercase        Kaikki kirjaimet versaaliksi
lowercase         Kaikki kirjaimet pieaakkosiksi
none                 Sellaisenaan, eli eliminoidaan aiemmista määrittelyistä perityt arvot

kapiteeliominaisuus                  font-variant: small-caps tai none  (Kaikilla fonteilla ei ole)

Huom!

Otsikkofonteilla on oletusarvoisesti lihavointi. Se kannattaa määritellä pois, koska näin lihavoituna teksti voi olla huonon näköistä. Kannattaa käyttää kyseisen fontin bold fonttileikkausta, jos sellainen on olemassa jos haluaa tekstin olevan lilhavoitua.

Jos tekstin haluaa kokonaan ISOILLA KIRJAIMILLA (versaalilla), se kannattaa kirjoittaa pienillä kirjaimilla ja muuttaa tuolla text:transfrm:uppercase-määrittelyllä isoiksi. Syynä on ainakin se, että jos sen tekstin haluaa muuttaa myöhemmin gemenaksi eli pieneksi, niin on helppo vaihtaa.