HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [64]
3. Place the font file near your code: Your Web page will need a copy of the font file somewhere on the server; put it in the same directory as your page. Remember, when you move the page to the server, you also need to make a copy of the font file on the server.
4. Build a font-face: Near the top of your CSS, designate a new font face using your custom font. This is slightly different CSS syntax than you may have used before. The @ sign indicates you are preparing a new CSS element.
5. Specify the font-family: This is the name used to designate the font in the rest of your CSS. Typically, this is similar to the font name, but easier to type.
6. Indicate where the font file can be found: The src attribute indicates where the file can be found. Typically, this is the filename of the font file in the same directory as the page. You can include several src attributes if you want to have more than one version of the file. (You might include EOT and OTF formats, for example, so the font is likely to work on any browser.)
7. Use your new font in your CSS: You now can use the font-family name in your CSS the same way you do with any other font. If the user doesn’t have that font installed, the font is used for this Web page but not installed on the client’s machine. Some fonts (like Miama in my example) may require some size adjustments to look right.
Just because you can use any font file doesn’t mean you should. Many fonts are commercial products and cannot be distributed without permission. However, many excellent free and open-source fonts are available. See the open font library at http://openfontlibrary.org to find several great fonts.
Audio and Video Tags
Multimedia has been a promise of Web technology since the beginning but isn’t integrated fully into HTML. Developers have had to rely on third-party technologies, such as plugins and the embed tag, to incorporate audio and video into Web pages. HTML 5 finally supports audio (with an