Thanks @PartiallyFinite, that's a great idea!
The order of the URL calls is crucial, so I am sharing my @font-face CSS property:
@font-face {
font-family: "my_custom_font";
src: url('my_custom_font.eot');
src: url('my_custom_font.eot?#iefix') format('embedded-opentype'),
url(data:font/truetype;charset=utf-8;base64,AAA...AAA=) format('truetype'),
url('my_custom_font.woff') format('woff'),
url('my_custom_font.ttf') format('truetype'),
url('my_custom_font.otf') format("opentype"),
url('my_custom_font.svg#my_custom_font') format('svg');
font-weight: normal;
font-style: normal;
font-variant: normal;
}
Notes:
url(data:font/truetype)
needs to be placed before .woff
so Firefox uses base64
instead of .woff
.
Tested on Firefox 20.0, Google Chrome 26.0.1410.65, Safari 6.0.