Solution 1: Not using a font
You haven't said much about what you're actually doing. Building a website? A web-interface for a customer to edit an icon in the content management system of a website? I'm guessing.
It sounds like you're over-complicating things by thinking about fonts at all. They are usually monochromatic animals. Usually.
Why not just use an SVG? You can easily build or load one in Javascript, and edit it from Javascript; there are many online demos and I've provided another one here. Changing two colours would be pretty trivial, then.
Here is a quick way to build an SVG in a page, and even offer it for download as a standalone file:
<!DOCTYPE html>
<html><head>
<title>Chess SVG Builder</title>
<script type="text/javascript">
window.addEventListener("load", function() {
// Draw board
var svg = document.getElementsByTagName("svg")[0],
sz = Math.min(svg.clientWidth, svg.clientHeight),
sqr = sz / 11, smSqr = sqr / 2,
xSmO = (svg.clientWidth - sz) / 2, ySmO = (svg.clientHeight - sz) / 2,
xO = (svg.clientWidth - 8 * sqr) / 2, yO = (svg.clientHeight - 8 * sqr) / 2;
svg.innerHTML = "";
for (var x = 0; x < 22; x++) for (var y = x % 2; y < 3; y += 2)
svg.innerHTML += '<rect x="' + (xSmO + smSqr * x) + '" y="' + (ySmO + smSqr * y) + '" width="' + smSqr + '" height="' + smSqr + '" style="fill:#eee;" />';
for (var x = 0; x < 3; x++) for (var y = x % 2; y < 19; y += 2)
svg.innerHTML += '<rect x="' + (xSmO + smSqr * x) + '" y="' + (ySmO + smSqr * y) + '" width="' + smSqr + '" height="' + smSqr + '" style="fill:#eee;" />';
for (var x = 19; x < 22; x++) for (var y = x % 2; y < 19; y += 2)
svg.innerHTML += '<rect x="' + (xSmO + smSqr * x) + '" y="' + (ySmO + smSqr * y) + '" width="' + smSqr + '" height="' + smSqr + '" style="fill:#eee;" />';
for (var x = 0; x < 22; x++) for (var y = 20 - x % 2; y < 22; y += 2)
svg.innerHTML += '<rect x="' + (xSmO + smSqr * x) + '" y="' + (ySmO + smSqr * y) + '" width="' + smSqr + '" height="' + smSqr + '" style="fill:#eee;" />';
for (var x = 0; x < 8; x++) for (var y = 1 - x % 2; y < 8; y += 2)
svg.innerHTML += '<rect x="' + (xO + sqr * x) + '" y="' + (yO + sqr * y) + '" width="' + sqr + '" height="' + sqr + '" style="fill:#700;" />';
svg.innerHTML += '<rect x="' + xO + '" y="' + yO + '" width="' + 8 * sqr + '" height="' + 8 * sqr + '" style="fill:none; stroke-width:1; stroke:#000;" />';
// Print pieces
svg.style.fontSize = sqr + "px";
var numInstances = [1, 1, 2, 2, 2, 8],
horz = [4, 3, 0, 7, 2, 5, 6, 1],
pieceNum = 0;
for (var code = 12; code < 24; code++)
for (var lp = 0; lp < numInstances[code % 6]; lp++) {
var pN = pieceNum % 16;
var x = xO + sqr * (0.5 + (Math.floor(pieceNum / 8) % 2 == 0 ? horz[pieceNum % 8] : pieceNum % 8)),
y = yO + sqr * (0.9 + 7 * (1 - Math.floor(pieceNum / 16)) - Math.floor((pieceNum % 16) / 8) * (1 - 2 * Math.floor(pieceNum / 16)));
svg.innerHTML += '<text x="' + x + '" y="' + y + '" text-anchor="middle">b' + code + '</text>';
pieceNum++;
}
// Make downloadable
var serializer = new XMLSerializer(),
source = serializer.serializeToString(svg);
if (!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/))
source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
if (!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/))
source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
source = '<?xml version="1.0" standalone="no"?>' + source;
document.getElementsByTagName("a")[0].href = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);
});
</script>
</head><body>
<svg width="550" height="550">
</svg><br />
<a>Download as a file</a>
</body></html>
As you can see, I actually do have an interest in building multi-coloured fonts. I want my chess pieces to retain their semantic meaning to the computer, and so I 'write' them with the Unicode characters from 9812 onwards. And if your display's font is like mine, you'll see monochromatic pieces with gaps in them; it's a crude attempt to simulate a second colour; red squares interfere with the look of the pieces, and a chess position would be unreadable.
On own my display, 'white' pieces on red squares actually don't have a speck of white anywhere inside them; therefore I do not think I am nitpicking, here... I think it's fair to ask that the white king should be white.
Solution 2: Using a font
Still use an SVG to define the font, but there will be a lot more manual reading involved.
Don't SVG fonts allow multiple colours in a single glyph? I'm not sure of the exact inheritance rules, and that seems relevant for you. Read and experiment?
w3c glyph spec
If I've understood what I'm reading, changing length-typed values from css can be confusing, because on a glyph defined the way you need, it would actually use the glyph's local coordinate system(?) But colours should be safe.
I may have some code samples later, whenever I get onto this myself. I think it may involve altering the SVG from Javascript; I can't imagine CSS being able to control all the colours of such a customised font. It seems likely to me that 'inherit' is the property to use for a default colour, while other colours used in the glyph would need JS? More here later perhaps, when I know.