Note: You are currently viewing documentation for Moodle 3.1. Up-to-date documentation for the latest stable version of Moodle is probably available here: IPA filter.
In order to ensure that the IPA displays correctly -- especially the combining marks (diacritics) -- you will want to be sure to load at least one IPA-compatible web font. The Moodle IPA filter ships with two fonts that you can call, or you can use a carefully selected Google Web Font. In each case you will need to add a link to a particular style sheet in the HEAD area of Site administration > Appearance > Additional HTML.
Gentium is the first font listed in the filter's 'font-family' so if you load it, it should display. Gentium is a slightly fanciful serif font that is very readable even at smaller sizes -- important when you are using unusual glyphs.
To use Gentium add something like this to your Additional HTML:
<link rel="stylesheet" href="URL_TO_YOUR_MOODLE/filter/ipa/gentium.css" type="text/css">
You will need to provide the root URL to your own Moodle site to replace "URL_TO_YOUR_MOODLE".