The CSS font-family property is fundamental to web design. The appearance of a website is largely determined by the choice of fonts made by the web designer. A mood, look and feel can be set with the use of the CSS font-family property.

First of all below here is a html5 with five paragraph elements. In the css ‘style’ tags each paragraph is set with a font by using the CSS font-family property.

CSS font-family Property.
Five different fonts!

Notice that on lines 8,9 and 10 the ‘font-family’ is surrounded by a pair of quotes (“”). This is because the ‘font-family‘ name is more than one word and it contains spaces. One word ‘font-family’ names do not require double quotes.

It is also good practice for web designers to declare “fall back” fonts when using the css font-family property. This involves declaring the generic font-family. The html5 document is amended to include a “fall back” generic font-family.

And of course the webpage remains unchanged!

CSS font-family Property.
Five different fonts!

There are four ‘generic font-families’:

  • sans-serif
  • serif
  • monospace
  • cursive

Now we change the html5 document by declaring a different font and a ‘generic font-family’ for each of the five paragraphs.

CSS font-family Property

The css font-family property is also able to be set using javascript.
Below is a html5 document with a ‘h1’ heading and some javascript in-between the ‘script’ tags that sets a font-family property for the ‘h1’.

CSS font-family Property. Look at me :).

CSS3 logo. CSS Font-family Property

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

Your email address will not be published. Required fields are marked *