Generally, you should use standard fonts for the HTML5 and CSS3 web page's main content, so having a limited array of fonts isn't such a big problem. Sometimes, though, you want to use fonts in your headlines. You can use a graphical editor, like GIMP, to create text-based images and then incorporate them into your pages.
Here's the process for using a special font:
Plan your page.
When you use graphics, you lose a little flexibility. You need to know exactly what the headlines should be. You also need to know what headline will display at what level. Rather than relying on the browser to display your headlines, you're creating graphics in your graphic tool and placing them directly in the page.
Create your images.
You can the wonderful Logos feature in GIMP (choose Xtns ➩ Script-fu ➩ logos) to create your text.
Specify font sizes directly.
In the image, it makes sense to specify font sizes in pixels because here you're really talking about a specific number of pixels. You're creating “virtual text” in your graphic editor, so make the text whatever size you want it to be in the finished page.
Use any font you want.
You don't have to worry about whether the user has the font because you're not sending the font, just an image composed with the font.
Create a separate image for each headline.
This particular exercise has two images — a level 1 heading and a level 2. Because you’re creating images directly, it's up to you to keep track of how the image will communicate its headline level.
Consider the headline level.
Be sure to make headline level 2 values look a little smaller or less emphasized than level 1. That is, if you have images that will be used in a heading 1 setting, they should use a larger font than images that will be used in a less emphasized heading level. Usually, this is done by adjusting the font size in your images.
Build the page the way you normally would.
After you create these specialty images, build a regular web page. Put
and
tags in exactly the same places you usually do.
Put
tags inside the headings.Rather than ordinary text, place image tags inside the
and
tags. See the upcoming code imageTitles.html if you're a little confused.
Put headline text in the alt attribute.
The alt attribute is especially important here because if the user has graphics turned off, the text still appears as an appropriately styled heading. People with slow connections see the text before the images load, and people using text readers can still read the image's alt text.
Here's the code used to generate the image-based headers:
<!DOCTYPE html> <html lang = "en-US"> <head> <meta charset = "UTF-8"> <title>imageTitles.html</title> </head> <body> <h1> <img src = "cowsHistory.png" alt = "Cows in History" /> </h1> <p> This page describes famous cows in history </p> <h2> <img src = "cowpens.png" alt = "Battle of Cowpens" /> </h2> <p> Most people are unaware that cattle actually took part in the battle. They didn't of course. I just made that up. </p> </body> </html>
This technique is a nice compromise between custom graphics and ordinary HTML as follows:
You have great control of your images. If you're skilled with your graphics tool, you can make any type of image you want act as a headline. There's literally no limit except your skill and creativity.
The page retains its structure. You still have heading tags in place, so it's easy to see that you mean for a particular image to act as a headline. You can still see the page organization in the HTML code.
You have fallback text. The alt attributes will activate if the images can't be displayed.
The semantic meaning of image headlines is preserved. The alt tags provide another great feature. If they replicate the image text, this text is still available to screen readers and search engines, so the text isn't buried in the image.
This technique is great for headlines or other areas, but notice that the headline text was repeated in the
Don't be tempted to use this technique for larger amounts of body text. Doing so causes some problems:
The text is no longer searchable. Search engines can't find text if it's buried in images.
The text is harder to change. You can't update your page with a text editor. Instead, you have to download the image, modify it, and upload it again.
Images require a lot more bandwidth than text. Don't use images if they don't substantially add to your page. You can make the case for a few heading images, but it's harder to justify having your entire page stored as an image just to use a particular font.