Last Updated: February 25, 2016
·
2.242K
· ffoodd_fr

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/