Further research suggests a simple answer: it can't be done.
Is there a way to use the same base64 data URI with two @font-face declarations?
Question
I have a CSS file with @font-face declarations. The corresponding fonts are stored as base64-encoded WOFFs within the declarations. For reasons that you'll have to trust are good ones, I'd like to create multiple @font-face declarations that point at the same base64 WOFF (meaning, without duplicating it within the CSS file, nor moving it to an external file.)
Can it be done? If so, how?
Solution
OTHER TIPS
Pure CSS do not have pointers.
Have a look at SASS or LESS, which are pre-compilers for CSS.
They allow (among of other things) the use of variables:
@b64woff: url("data:font/opentype;base64,AAEAAAATAQAABAAwR1BPU7iiypwABG5IAA...");
@font-face {
font-family: 'YourFont';
src: @b64woff;
}
In fact, when LESS or SASS will compile your code, it will replace every instance of @b64woff
with its value.
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow