Online Test Banks
Score higher
See Online Test Banks
eLearning
Learning anything is easy
Browse Online Courses
Mobile Apps
Learning on the go
Explore Mobile Apps
Dummies Store
Shop for books and more
Start Shopping

How to Set the Font Family on HTML5 and CSS3 Web Pages

To assign a font family to part of your page, use some new CSS. As an example, this page has the heading set to Comic Sans MS. If this page is viewed on a Windows machine, it generally displays the font correctly because Comic Sans MS is installed with most versions of Windows. If you're on another type of machine, you may get something else. Look at the simple case.

Here's the code:

<!DOCTYPE html>
<html lang = "en-US">
 <head>
 <meta charset = "UTF-8">
 <title>comicHead.html</title>
 <style type = "text/css">
  h1 {
  font-family: "Comic Sans MS";
  }
 </style>
 </head>
 <body>
 <h1>This is a heading</h1>
 <p>
  This is ordinary text.
 </p>
 </body>
</html>

The secret to this page is the CSS attribute. Like most CSS elements, this can be applied to any HTML tag on your page. In this particular case, it was applied it to the level one heading.

  h1 {
  font-family: "Comic Sans MS";
  }

You can then attach any font name you wish, and the browser attempts to use that font to display the element.

Even though a font may work perfectly fine on your computer, it may not work if that font isn't installed on the user's machine.

image0.jpg

If you run exactly the same page on an iPad, you might see this result.

image1.jpg

The specific font Comic Sans MS is installed on Windows machines, but the MS stands for Microsoft. This font isn't always installed on Linux or Mac. (Sometimes it's there, and sometimes it isn't.) You can't count on users having any particular fonts installed.

The Comic Sans font is fine for an example, but it has been heavily over-used in web development. Serious web developers avoid using it in real applications because it tends to make your page look amateurish.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.