The fonts that people see on a website (or blog) – or in an e-mail, for that matter, are the ones they have on their computer. It matters not which ones you have on yours.
“Browser-safe” fonts are very few in number, as they comprise those fonts that almost every computer has installed. They are declared in font-families such as “Arial, Helvetica, sans-serif” or “Times New Roman, Times, serif” so that PC and Mac users will see approximately the same thing.
Many of these fonts have been designed for easy readability on monitors and small screens.
Here is a list of the “browser-safe” font families that can be used.
Websites and blogs are usually designed with stylesheets that declare the fonts to be used. Changing a font in the stylesheet creates an overall change on your whole site. To change the font of an individual selection of text on a page, you can create a “class” in the stylesheet or in the head section of the page to declare the new font, then tag the special text in order to tell the stylesheet where to apply the special font. You can also add a style “inline” in the HTML directly, but this is tedious. Styles are applied according to the rules of CSS (cascading style sheets). If you aren’t ready to make a study of CSS, stick to the styles given in your stylesheet.
It’s considered poor design to have a lot of fonts on a page anyway, without some special reason. Usually, there is one font for headers, and maybe a different one for paragraphs. You can use the variations of bold, italic and colour to achieve variety, even in WordPress.
In WordPress, when writing a post or page in Visual mode, you can easily tag your headings. To do this, click on the “Kitchen Sink” button (right
), then select from the Format drop-down list on the second line that appears. The format you select will affect a whole paragraph, making it either “paragraph” or Heading1, Heading2 etc.
A “Preformatted” font is also available (see which is a typewriter-like monospaced font like Courier, and is usually used to quote computer code. You have to put in the line breaks yourself or it will just extend on forever. You can experiment with those. They are defined in the stylesheet.
When cutting and pasting from another program, be careful that you don’t import the original font stylings.
It is possible to embed a font forcing your readers to download a font that you want to use on a webpage, but I don’t do it because:
- It doesn’t work with all browsers (UPDATE 2013: this issue has faded away as browsers improve),
- It increases download time (UPDATE 2013: this issue can be minimized; see below),
- There can be copyright issues (UPDATE 2013: see below, as Google has changed this issue for us).
UPDATE, 2013: Google Web Fonts has now made it easier to embed interesting, open source fonts into your website. Some WordPress themes make the job easy. It’s most effective for titles and headers. I’ve done it on this site. For another example, see my SpiroGraphic Art site for how custom fonts can enliven a page.
Fancy fonts can also be used by creating an image file of the text. This practice is regularly seen in headers and logos. The disadvantages of taking this approach with page text and headlines are:
- Pages download more slowly because image files take longer to download than text, and
- Search engines, as well as screen readers used by visually-disabled people, can’t read and index the text in an image file, though they can read “title” and “alt” text associated with images.
Search engines give extra weight to the text inside a heading tag. So you lose a lot of “google-juice” if you put your headers in image tags. That technique is best left for page header, logo etc. WordPress won’t allow you do it anyway.
Save your unusual fonts for headers and logos, and use an easy-to-read font for your page text.