T6 Web Development

Using Fonts

Fonts are assigned to web pages using the font-family property.  This is done using a CSS Rule for the <body> tag.  An example of this is:

body {font-family: 'Lucida Sans Unicode', Geneva, sans-serif;}

The font-family property allows a group of fonts to be assigned to cater for different operating systems.

The list above contains a font for Microsoft Windows, Lucida Sans Unicode, one for the Apple OS, Geneva, and a generic font family, sans-serif.  The generic font family will be used if the browser doesn't recognise the first two fonts, ensuring the page will display.

W3C on fonts: GO

System Fonts

Operating systems (Windows, Mac) have in-built fonts which browsers can use.

Fonts can be divided into groups or families, Sans-Serif, Serif, Cursive, Monospace, and Fantasy.  Fantasy fonts are poorly recognised across browsers and Operating Systems.

Web Fonts

There is no reason to rely on the limited number of system fonts available.  A web site can take advantage of fonts on offer from font web sites.  Google Fonts is an example.

Google web fonts: GO

CSS-Tricks article on custom fonts: GO

Font Examples


Font Example Font Family
Arial Sans-Serif
Helvetica Sans-Serif
Georgia Serif
'Palatino Linotype' Serif
'Comic Sans MS' Cursive
Florence Cursive
Courier Monospace
Monaco Monospace
Oldtown Fantasy
Blippo Fantasy