A betűtípust a font-family tulajdonság segítségével állíthatjuk be. Kétféle értéket adhatunk meg számára, mindkettőből egyszerre többet is felvehet:
| Érték | Leírás |
| fontcsalád | valamilyen konkrét betűcsalád elnevezése |
| általános család | A CSS öt ilyen típust különböztet meg: serif sans-serif cursive fantasy monospace |
| általános font családok | Leírás |
| serif | A serif (talpas) fontok betűszárait talp, de legalább vonal zárja le. A betűk különböző szélességűek, a betűvonalak vastagsága is gyakran változik. Ezek a klasszikus latin betűk, amelyeknek legismertebb mai képviselői pl. a Times New Roman vagy a Garamond. |
| sans-serif | A sans-serif (talp nélküli) fontok szárait nem zárják le talpak. A betűszárak azonos vastagságúak, de a betűk szélessége különböző. Ilyen jellegű fontok minden írástípusra megtalálhatóak (pl. Arial). |
| cursive | A cursive betűk a kézírást utánozzák, a karakterek egymással összekapcsolódnak, összeérnek. Az íráskép gyakran dőlt, emiatt a kurzív kifejezést a nyomdászatban a dőlt betűk megnevezésére is használják. |
| fantasy | A fantasy betűk dekoratívak, díszítettek, de őrzik a betűalakokat. |
| monospace | A monospace fontok jellegzetessége, hogy karaktereik azonos szélességűek, az írógép betűihez hasonlóan. Ilyen például a Courier betűcsalád. |
A forráskód részlet:
<p style="font-family: Arial, Helvetica, sans-serif;">
Ez az Arial betűcsaláddal készült. Ha nincs a kliens gépén akkor Helvetica-val jelenik meg. Ha az sincs, akkor jön az általános betűcsaládba tartozó, ami már biztosan van a gépen.</p>
<p style="font-family: 'Courier New', Courier, monospace;;">
Ez a Courier stílusú. Figyeljük meg a forráskód részletnél, hogy azt a betűcsaládot, amelynek neve több szóból áll, idézőjelek vagy macskakörmök közé kell tennünk.</p>
<p style="font-family: Tahoma, Geneva, sans-serif;">
Ez ha igaz, akkor ez a Tahoma betűcsalád, hanem akkor Geneva és ha az sem, akkor talp-nélküli betűcsalád.</p>
Az eredmény:
Ez az Arial betűcsaláddal készült. Ha nincs a kliens gépén akkor Helvetica-val jelenik meg. Ha az sincs, akkor jön az általános betűcsaládba tartozó, ami már biztosan van a gépen.
Ez a Courier stílusú. Figyeljük meg a forráskód részletnél, hogy azt a betűcsaládot, amelynek neve több szóból áll, idézőjelek vagy macskakörmök közé kell tennünk.
Ez ha igaz, akkor ez a Tahoma betűcsalád, hanem akkor Geneva és ha az sem, akkor talp-nélküli betűcsalád.
A forráskód részlet:
<style type="text/css">
@font-face {
font-family: Argos;
src: url(fonts/Argos-Regular.ttf);
}
p {font-family:Argos;font-size: 24pt;}
<h3>HELLO CSS 3 WORLD!</h3>
Az eredmény:
A beágyazott fontok alkalmazásával nagyon látványos eredményt érhetünk el, hiszen az oldal tervezésekor bármilyen betűtípust használhatunk.
Ha a fontok és a honlap ugyanazon a szerveren található, akkor az oldal helyes megjelenítése valószínűleg nem fog gondot okozni a böngészőnek. Ellenkező esetben viszont megtörténhet, hogy a fontok tárolására szolgáló webhely nem érhető el.