HTML5 Fonts: Adding Fonts to Your Webpage

Udemy Editor

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. –>

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.

Andale Mono

Arial

Arial Bold

Arial Italic

Arial Bold Italic

Arial Black

Comic Sans MS

Comic Sans MS Bold

: 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:

American Typewriter

Apple Chancery

Baskerville

Big Caslon

Brush Script

Capitals

Charcoal

Zapfino

Copperplate

Futura

Gadget

Gill Sans

Herculanum

Hoefler Text

Hoefler Text Ornaments

Lucida Grande

Marker Felt

Optima

Osaka

Palatino

Papyrus

Sand

Skia

Techno

Textile

Times

Zapf Dingbats

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:

unix_fonts

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. –>

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.