HTML and CSS Reference
In-Depth Information
Now you can start out by creating a new HTML document in the root folder of your project. Name it
index.html
and insert the
doctype
and other required elements:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Realtime Q&A</title>
</head>
<body>
</body>
</html>
Getting Fonts Ready to Go
Next, you need the fonts for the design. Because Cooper Black and News Gothic aren't traditionally web-safe fonts
such as Tahoma and Georgia, you'll need to use the
@font-face
capability of CSS to load them.
However, Cooper Black and News Gothic aren't released under the Open Font License,
1
which means it's not
legal to simply toss the font up on the site using
@font-face
. But fortunately this isn't a problem due to the emergence
of companies such as Fonts.com, which (for a reasonable fee) will handle the legalities of font embedding and just let
us get on with the design.
For this app, create a free account at Fonts.com, create a new project in the “Manage Web Fonts” section, and add
Cooper Black Regular and the News Gothic No. 2 Family fonts (search for “News Gothic”) to a project (see Figure
7-2
).
Add your dev domain (even if it's local) to the project; then publish it. Use the JavaScript Embed option because it's
the only one you can use with a free account.
Figure 7-2.
Fonts.com project details
1
Search WWH ::
Custom Search