Hey Bigfoot, I was doing almost exactly what you were doing (I was using spans and CSS, not 'font', as 'font' is a bit of a nono these days).
Regardless, the problem was the same. However, I found a quick little work around and wanted to share it in case anyone is having similar problems.
Adding the code to the language file works perfect for the status indicator in the user lists and the profile area, but as Bigfoot stated, it pooches when it comes to the Connections tab.
The reason is because the php for the connections tab calls the language definition and inserts it into another tag (an img's alt and title tag), then, because there are quotes in it (in BF's example "red" and "gray"), this screws everything up.
So, all I did was change the tags to ones not using quotes and then used CSS. My language file looks like this:
[code:1]DEFINE('_UE_ISONLINE','<em>ONLINE</em>');
DEFINE('_UE_ISOFFLINE','<strong>OFFLINE</strong>');[/code:1]
That's located here:
\components\com_comprofiler\plugin\language\default_language\default_language.php
Then I just added some CSS to my template's CSS file. As I wanted the "OFFLINE" to simply be bold, I didn't need to change that. And for the ONLINE, I wanted it bold, and green:
[code:1].cbPosRight .cbStatusList em, #cbUserTable em {color:#66cc00; font-style:normal;font-weight:bold;}[/code:1]
This fixes it for the user's profile status list and in user list. Modifications will be needed if you have your status indicators in other locations - just check your source code to see what classes/ids are affecting it.
Hope that's straight forward enough. This REALLY should be part of the core.