New Bulletproof @font-face syntax using Data URIs in Compass

Question

I am using compass\' font-face mixin along with the inline-font-files and font-files in order to create something along the lines of the

Answer 1

For those interested, the workaround mentioned in the question seems to work pretty well. It is probably a good idea to move the eot file attribute from data URI @font-face rule to the one using a standard url(). It appears sometimes the data: URL's generated are too long, which breaks the entire @font-face rule. Also, make sure the data URI rule is loaded last, since Firefox 5 and up seems to load only the last rule encountered. Hence, keep the inline fonts (woff, ttf, otf) in the last rule and the linked fonts (svg, eot) in the first, like so:

@include font-face('PTSans', font-files('ptsans/pts55fwebfont.svg#PTSansRegular') 'ptsans/pts55fwebfont.eot', normal, normal);
@include font-face('PTSans', inline-font-files('ptsans/pts55fwebfont.woff', woff, 'ptsans/pts55fwebfont.ttf', truetype), $weight: normal, $style: normal);