12.1. Setting Specific Font Names or Generic Font Family Names (font-family Property)

To set a specific font name or a generic font family name to some text, you need to use the font-family WCSS property. Here is an example that illustrates its use:


p {font-family: Arial, Helvetica, sans-serif}


In the above example, "Arial" and "Helvetica" are specific font names and "sans-serif" is a generic font family name. The style statement tells the WAP browser to use the Arial font to display text enclosed in <p></p> tags. If the Arial font is not available on the mobile device, the WAP browser will use the Helvetica font. If both the Arial font and the Helvetica font are not available, the WAP browser will try to find a font that belongs to the sans-serif font family on the mobile device. If such a font is found, the text will be displayed with it. Otherwise, the WAP browser will choose an alternative.

It is a good practice to include one generic font family name at the end of the font list.

If a font name consists of more than one word (i.e. the font name contains whitespaces), you have to enclose it within single quotes or double quotes. Here are some WAP CSS examples that illustrates this:


p {font-family: "Times New Roman"}


<p style="font-family: 'Times New Roman'">
...
</p>


Five generic font family names are accepted by the font-family property. They are serif, sans-serif, monospace, cursive and fantasy. Some example fonts of each generic font family are shown in the following table. Note that these five generic font family names are keywords and they should not be enclosed within single quotes or double quotes.


Generic Font Family Names

Example Fonts

serif

Times New Roman

sans-serif

Arial, Helvetica

monospace

Courier

cursive

Zapf-Chancery, Caflisch Script

fantasy

Western, Critter


It is important to note that there is no guarantee that a certain mobile device will contain at least one font for each generic font family.

The screenshots of the following XHTML MP/WAP CSS example will give you some idea about the look of each of the five generic font families in WAP browsers.


(fontFamilyEg1.xhtml)

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Generic Font Families</title>
  </head>

  <body>
      <p style="font-family: serif">Serif</p>
      <p style="font-family: sans-serif">Sans-serif</p>
      <p style="font-family: monospace">Monospace</p>
      <p style="font-family: cursive">Cursive</p>
      <p style="font-family: fantasy">Fantasy</p>
  </body>
</html>



Nokia Mobile Browser 4.0


Previous Page Page 16 of 39 Next Page


Feedback Form (ExpandCollapse)

What do you think about this web page?






(Optional) Please provide us more details. For example, suppose you select option 2 above, can you tell us specifically what information is missing? You can also suggest anything that can help us improve this web page.

(Optional) Your name:

(Optional) Your email address:

Please enter again to confirm:

Due to the amount of messages we received, we may not be able to reply to all messages.

A button for going back to the top of this page