IPA symbols and unicode
In order to use phonetic symbols in a word processor, you must have a Unicode font installed - most probably you already do. If you use windows then you probably already have Lucida Sans Unicode installed, and you may also have Arial Unicode installed as well. On some systems you might possibly need to download a font.
If this displays correctly, you have a unicode font installed.
If you need to download a unicode font you can get Lucida Sans here:
Gentium is another Unicode font that includes IPA characters and can be downloaded from here:
SIL's updated Doulos Unicode IPA font can be downloaded from here:
Follow the installation instructions for your system.
Using IPA symbols in MS Word
Once you have a Unicode font, there are a number of ways of typing phonetic symbols.
In MS Word you can select ->Insert>-Symbol which opens a window that displays the different symbols available. After opening the Unicode font in the window, you can select a symbol and insert it into the document. I find this extremely slow, because the organisation of the symbols does not seem very logical to me, and the IPA and phonetic symbols are in different places which makes it very tedious when you need to insert combinations of both - for example an /i:/.
A more convenient method is to use a dedicated keypad. This is an extra bit of software that works with the word processor and contains all the symbols together. There are several of these; for example, Keyman:
I find the layout of keys a little unhelpful. I am only really interested in using the symbols for British English, and I am used to the layout of the Sound Foundations Phonetic Chart developed by Adrian Underhill, which is widely used in the UK. There is a better keypad for typing IPA Symbols, which overcomes this problem. It is Phonmap, the Phonemic Script Writer, by Jan Mulder.
However,the disadvantage of dedicated keypads, is that you need to have the software installed on the computer that you are using - this can be impractical if you travel or use a number of different computers. For this reason I developed this simple web application. Because it is on the internet, I can use it no matter where I am, or what computer I am using. And I have arranged the keypad so that it reflects the Sound Foundations Chart, which makes it easier for me to type phonetic symbols.
The easy way to type phonetic symbols, too, in MS Word - John Wells
Lots of info about typing IPA in a word document.
The International Phonetic Association - IPA fonts
Adding IPA symbols to a web page
There are several ways of displaying IPA symbols in a web page.
One way to do this is to use images rather than text - you create one or more images of the IPA symbols that you want to use, and you insert them in your web document like any other image. One utility that does this is the Graphical IPA Keypad from the University of Victoria http://web.uvic.ca/hrd/ipa/
While this is an effective and straightforward solution, it can slow up the display of your web page if you have a lot of images. It also means that you don't have any control over the display of the characters. If you decide to change the colour of the characters, you will need to create a new image. Unicode offers a neat solution - nearly all computers have a unicode font installed, and this means that IPA symbols can be displayed in a web browser, just like any other letter.
In order to add IPA symbols to your webpage you unfortunately have to type the code that represents the symbol. Each letter is made up of a code which combines the & symbol, the # symbol, a three figure number and a semi-colon. For example, the code for ɪ is ɪ. In order to do this we need to find the code number for each of the symbols that we want to use and type them into our webpage. I find this extremely tedious.
For this reason I developed this simple web application, which is a simple keypad. You type the symbols that you want to use and the code for them is displayed in the text box. You can then copy and paste this code into your web page.
The code will not work unless you also use a stylesheet to set the font to one that will display the symbols. You can do this by using something like this:
font-family: "Lucida Sans Unicode", Gentium, "Arial Unicode
MS", "Times New Roman", serif;
and then including this code in your webpage:
<p class="phonemic"> paste in the code for the symbols here </p>