HTML5, CSS3, and JavaScript Fourth Edition

(Ben Green) #1

CHAPTER 10. FONT FAMILIES 109


Avoid The Font Tag


TheHTML tag was introduced in 1995 by Netscape, long before
CSS was invented.


Old-style HTML would use(for example) to
specify a font stack.


The old style isdeprecated, having been replaced by CSS Font Properties.
Do not use it. Still, you will probably run into it from time to time, and
older tutorials may rely on using it.


10.5 Defending Against Missing Fonts


How do you handle missing fonts? The font stack is your first line of defense.
But what if you really really want a specific font for use in a top-of-page
banner of something?


One solution is to render your special text in advance and save it as an
image. This is guaranteed to work on any browser that displays images.
This is commonly done for page headings and logos.


Another solution is to use a web font which will be downloaded to your user’s
computer if they don’t already have it. This also works on every modern
browser. See section 10.6 (page 110).


Font by Image


If you seriously want a particular font for the heading of your page, one
solution is to use the font locally to create an image file that can be used
inside your page.


You can Google search “free fonts” to find thousands of very nice fonts.


You might choose to use a .png file with a transparent background so that
your image can overlay any background you might choose in the future.


There are several problems with the “image” solution.


(a) Images, especially headings, can be large. If you are using the same font
but different wording for several headings, and each heading has its own
image, you have to download all of them as needed.