Using @font-face with an SVG font embedded in the current HTML page

Question

I have a standalone HTML document I want to distribute, without any external dependencies. I\'m using a non-standard font in this document that only some of my users will ha

Answer 1

Convert the font to a data URI and embedded it in the CSS declaration: (fiddle)

    Alphabet

There's one caveat: you can't use an ID specifier (#MyFont) with a data URI like this. Therefore you can only have a single font in the encoded file, rather than having multiple and referring to them individually. (Not that you'd want to; duplicating the data for multiple embedded fonts in the declaration for each font would be a huge waste of space.)