SVG Essentials, 2nd Edition

Appendix E. Creating Fonts

The fonts built into the system that renders your SVG documents will take care of the vast majority of your needs. Sometimes, though, you will want to use a custom font. It is possible to create a font for use with SVG from scratch. In brief, you use a <font> element tag to describe the origin and default width of the font’s glyphs. Inside the <font> is the <font-face> element, which has an immense number of attributes that describe the font’s dimensions in excessive detail. Table E-1 summarizes some of the more useful attributes. You can see them all in detail in the SVG specification.

The SVG font specification was intended to allow designers to create accessible logos and graphics. Search engines and screen readers would understand the text as a sequence of characters, but the design could be completely customized and would look the same on every system. At the time of writing, this ideal has not yet been realized, because two major web browsers (Internet Explorer and Firefox) have not implemented SVG fonts. If you create a custom SVG font, there are web services that can convert it to other font formats for use with these browsers.

Table E-1. font-face attributes

font-family	A list of font family names
font-style	Values of normal, italic, or oblique.
font-variant	normal or small-caps.
font-weight	normal, bold, or a number from 100 to 900 in steps of 100.
font-stretch	Indicates the condensed or expanded nature of the face relative to others in its font family. ...