Another in the Frequently Given Advice department:
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.
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 (it looks like this:
), 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.
I’ve seen blogs get pretty messy-looking when people try to cut and paste from Word, for example, unintentionally carrying the formatting along with the text. It can be a mess to clean up. But now WordPress has buttons that allow you to “Paste as Plain Text” or “Paste from “Word” that will strip the formatting from the text on your clipboard. They look like this:
. Please use one of them if you are copying from Word, from another website or from any application where the text may be formatted already.
It is possible to embed a font force 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,
- It increases download time,
- There can be copyright issues.
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 can’t read and index the text in an image file.
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 – it requires a text headline, or will create one for you.
Save your unusual fonts for designing posters and things that you can print directly, or for your logo or header image.