Home

Setting the Font on HTML5 and CSS3 Web Pages

|
|  Updated:  
2023-05-03 18:30:51
HTML5 and CSS3 All-in-One For Dummies
Explore Book
Buy On Amazon
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.

About This Article

This article is from the book: 

About the book author:

Andy Harris earned a degree in Special Education from Indiana University/Purdue University–Indianapolis (IUPUI). He taught young adults with severe disabilities for several years. He also taught himself enough computer programming to support his teaching habit with freelance programming.
Those were the exciting days when computers started to have hard drives, and some computers connected to each other with arcane protocols. He taught programming in those days because it was fun.
Eventually, Andy decided to teach computer science full time, and he still teaches at IUPUI. He lectures in the applied computing program and runs the streaming media lab. He also teaches classes in whatever programming language is in demand at the time. He has developed a large number of online video-based courses and international distance education projects.
Andy has written several books on various computing topics and languages including Java, C#, mobile computing, JavaScript, and PHP/MySQL.
Andy welcomes comments and suggestions about his books. He can be reached at [email protected].