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


Preferences - Do not show ads

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


Page 16 of 39 Previous Page | Next Page
Contents at a Glance
Print this Web Page | | Back to Top
Custom Search

Feedback Form (Expand)

What do you think about this web page?






WCSS Tutorial Table of Contents WCSS Tutorial Contents at a Glance Preferences - Change Color Scheme Preferences - Do Not Show Ads Previous Page Next Page