Displaying IPA Symbols on Web Pages

Steps

There are four steps to displaying IPA symbols on a web page:

  1. Set the character encoding to UTF-8
  2. Specify the font family using a stylesheet
  3. Insert the character entity references
  4. If necessary, add appropriate HTML mark-up

Character Encoding

Put the following line into the <head> section of your page:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Ideally it should be before the <title>.

Read about character encodings and Unicode to understand what this line does.

Stylesheet

Specify the font-family for the IPA symbols. See fonts for the IPA for information on this.

Beware: Even if you are using the same font for the IPA as for the rest of the page, if you are using the IPA for buttons or for other form elements, you will need to specify it specifically for these. Read how Windows selects a font and form elements for information about why this is.

For a full understanding, read about fonts, platforms and fonts on web pages and look at the Unicode ranges for the IPA.

Note that, even if you specify the font family, if the user does not have a suitable font installed on their system, the symbols will not be displayed. They get replaced with a box shape or a vertical line.

Character Entities

Insert the appropriate character entity references into the document.

Read about character entity references if you don't know what they are.

I have a list of references for the phonemes of standard British English. Otherwise use my links to Dom Smith's on-line IPA to Unicode converter, or copy and paste the references from Penn State University's list, or get the Unicode value from David McCreedy's IPA test page.

HTML Mark-up

If you want to use a different font for the IPA from the font on the rest of the page, you need to add appropriate mark-up for the styles. This will probably be a statement such as <span class="ipa">.

Home