Text-replacement with @font-face and base64

Stylable, scalable, light and effortless text-replacement snippet : my own logo is a single character font compressed then encoded in base64, loaded via @font-face and customized via css.

Not a single http request - except the css, of course !

Bonus : using a data-attribute helps a lot with accessibility.

@font-face {
  font-family: 'logo';
  src: url('font/logo.eot');
  src: local('?'), url(data:font/woff;charset=utf-8;base64,...;
  font-weight: normal;
  font-style: normal;
}
h1 a {
  font: 0/0 a;
  text-decoration: none;
}
h1 a:before {
  content: attr(data-icon);
  font: 200px/250px 'logo';
  text-decoration: none;
}

http://www.ffoodd.fr/la-schizophrenie-semantique-dun-logo/