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
- Georgia
- Georgia Bold Italic
