<p>Changing a font is much more work (and needs more knowledge) than changing a svg. For crossbrowser support we need eot and woff font. With a svg we need  a png as a fallback.<br>
I would use a media query (like my code above) or a <a href="https://github.com/supports" class="user-mention">@supports</a> rule (<a href="http://caniuse.com/#feat=css-featurequeries">http://caniuse.com/#feat=css-featurequeries</a>). </p>

<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br>Reply to this email directly or <a href="https://github.com/openstreetmap/openstreetmap-website/issues/850#issuecomment-66341645">view it on GitHub</a>.<img alt="" height="1" src="https://github.com/notifications/beacon/ABWnLaoRGt2e8lZp_dtv9gghsuiYXnTiks5nV0SwgaJpZM4DDsQl.gif" width="1" /></p>
<div itemscope itemtype="http://schema.org/EmailMessage">
  <div itemprop="action" itemscope itemtype="http://schema.org/ViewAction">
    <link itemprop="url" href="https://github.com/openstreetmap/openstreetmap-website/issues/850#issuecomment-66341645"></link>
    <meta itemprop="name" content="View Issue"></meta>
  </div>
  <meta itemprop="description" content="View this Issue on GitHub"></meta>
</div>