Article Summary
HTML5 fonts refer to how fonts are applied to webpages using HTML5 and CSS3's `font-family` property. This article covers two coding methods, OS-specific font availability across Windows, Mac, and Unix, and using font stacks for broader compatibility. You'll know exactly how to set and optimize fonts for every user.
If you’re new to HTML5 and CSS3, you might still be working out how to get the coding down perfectly. One thing you might be struggling with is finding the perfect font for your webpage. Adding fonts is simple as long as you know the basics of HTML5 and CSS3. Even if you know older HTML and CSS, it’s easy to transition to the newest versions. Here’s a quick introduction to adding fonts to your webpage. Learn more about HTML5 with a beginner’s class.
Adding Fonts to Your HTML5 Coding
There are two different ways you can add the font type you want to use to the coding you have already written. One way is similar to cascading style sheets (CSS), and the other is more like HTML. Here’s an example of both below:
<!– This is an example of adding fonts to a webpage using a method similar to CSS. –>
body { font-family: “arial black”; }
<!– This is an example of adding fonts to a webpage using a method more familiar to HTML. –>
<body style=”font-family:”arial black”; >
Users familiar with CSS will recognize the first example, while users who only know HTML will be more familiar with the second example. If you knew an older version of HTML, you might be wondering what happened to using the simple <font> tags. These tags were censored from HTML 4.0 and higher. If you’re going to be creating webpages now, you’re going to want to use HTML5 and CSS3 to code it, or you might end up with some users unable to access your pages. Learn the fundamentals of HTML5.
Whether familiar with CSS or HTML, you can see that adding fonts with the latest versions of either will be quick and easy for you. However, your fonts will not show up universal. Different operating systems use different font families, and depending on the font family you pick, your font will show up differently in that user’s browser window.
If you want to customize the fonts that will be shown for each different browser, you’re going to want to know what fonts work for what operating systems. Check out the lists below for fonts for Microsoft operating systems, Mac operating systems, and Unix operating systems. Take a beginner’s crash course in HTML5.
Fonts for Microsoft Operating Systems
Below is a list of fonts along with a sample of what the font looks like. These fonts work only on Microsoft operating systems and browsers. Because not every owner of a Microsoft PC will have every font downloaded onto their computer, these are only screen shot examples of the fonts. Get help designing your site with HTML5 and CSS3.
- Courier New
Courier New Bold 
Courier New Italic 
Courier New Bold Italic 
- Georgia
Georgia Bold
Georgia Italic 
- Georgia Bold Italic
Impact 
Lucida Console 
Lucida Sans Unicode 
Marlett 
Minion Web 
Symbol 
Times New Roman 
Times New Roman Bold 
Times New Roman Italic 
Times New Roman Bold Italic 
Trebuchet 
Trebuchet Bold 
Trebuchet Italic 
Trebuchet Bold Italic 
Verdana 
Verdana Bold 
Verdana Italic 
Verdana Bold Italic 
Webdings
As you can see, if you’re designing a webpage for Microsoft operating systems, you have a lot of options available. Remember that not all PCs have these fonts available so if you can’t even see the font when previewing your webpage, you likely chose a font you don’t even have available on your computer.
Fonts for Macintosh Operating Systems
Some fonts from the Microsoft list are also available for Macintosh operating systems. Those fonts are Andale Mono, Arial, Arial Black, Comic Sans MS, Courier New, Impact, Trebuchet, Verdana, Symbol, Webdings, and Times New Roman. Here are examples of the fonts that are not available for Microsoft operating systems:
Like Microsoft users, there are plenty of fonts available for Macintosh users as well. When picking your font, you’re going to want to keep all users in mind. The last group of fonts is below.
Fonts for Unix Systems
Unix operating system users have only one font in common with both Microsoft and Macintosh users, and that font would be Symbol. There is only one other font that Macintosh and Unix users have in common, and that is Times. This is a list of all the Unix fonts typed in the font types:
Some of the fonts are a bit difficult to see, but you can at least get a picture of just how little is available for Unix users.
Adding More Than One Font to Please All Users
If you want to customize the font for different computer users, you’re going to have to include more than one font type in your code. This is a simple enough process, and you can use either CSS3 or HTML5 to include them. Here’s an example of the code you might use to include more than one font:
<!– This is an example of adding fonts to a webpage using a method similar to CSS. Be sure to include a font common to all users just in case they don’t have the other fonts installed. –>
body { font-family: “courier new, times new roman, times, papyrus, utopia, georgia”; }
<!– This is an example of adding fonts to a webpage using a method more familiar to HTML. Be sure to include a font common to all users just in case they don’t have the other fonts installed. –>
<body style=”font-family:”courier new, times new roman, times, papyrus, utopia, georgia”; >
As stated in the notes of the coding, make certain you pick the fonts you use carefully. You’re not going to want to pick a font that none of your users can view. Otherwise, the browser will pick a font for you.