As you know, fonts are kind of binary drawings in the sens that they are lines and shapes filled or not. 0 or 1.
It means a font cannot have a border by defaut. It can be "outlined" but it will always be monochrome.
So in order to get a font with a color and another color for the border, in fact I use 2 fonts : the original one and a reworked version that I "extend" using a free software (revised BSD Licence) FontForge. And of course, I use @font-face (and a font-face generator here )

For this example, I have taken CooperBlackStd.otf from my Windows' fonts directory

Get the default font @font-face

To do this, I open the ODT file using FontForge. Then I export the font in the TTF format (File>Generate Font...)

Then, thanks to http://convertfonts.com/, a font-face generator, I get all I need in order to use this font in my website (css, woff, eot..)

Extend the default font

Here comes the process which extends the font shape (keeping the same "font-size"):

Going to menu (Edit>Selection>True Glyphs) we select all the used glyphs in the font map

Going to menu (Element>Extend line...), opens a box as show below. Set the main stroke width and the minor stroke height. It will determinate kind of border width. Then, in order to have lighter output font file, I suggest to check "remove border inside (or something like that...shown at the bottom of the picture below)

Last thing is to generate a new font name. To do that go to the menu (Element>Font Infos...). Then set the new font name (here I set CooperBlackStdBorder...)

Get the new font's @font-face

Follow the same step as for the default font.

Code :

First, we must link the 2 font's style sheets, for example like that :

<link type="text/css" rel="stylesheet" href="assets/code/bordered-fonts/font-face/cooperblackstd.css" />
<link type="text/css" rel="stylesheet" href="assets/code/bordered-fonts/font-face/cooperblackstdborder.css" />

Then I use here this method to get both elements well adjusted:

<div style="height:40px;">
<span style="font-family:'CooperStdBlackBorder';font-size:42pt;color:#ff99ff;position:absolute;">Text border</span>
<span style="font-family:'CooperStdBlack';font-size:42pt;color:#cc3399;position:absolute;">Text border</span>
</div>

This way, you get a selectable smooth nice custom border.