Fonts, Families, Faces

Chapter 10 explores fonts and their impact on SVG text, including the use of the @font-face rule to incorporate web fonts in your SVG graphics online.

The links below will open the live example files or high-res PNG or JPEG screenshots in a new browser tab. Alternatively, you can download the entire collection as a zip archive or fork it as a GitHub repository. Be sure to read the O’Reilly Media policy on the use of example code.

• Inline figures (examples of font family types—some fonts may not be available on your system):
  • serif fonts SVG file
  • serif fonts screenshot
  • sans-serif fonts SVG file
  • sans-serif fonts screenshot
  • monospace fonts SVG file
  • monospace fonts screenshot
  • cursive fonts SVG file
  • cursive fonts screenshot
  • fantasy fonts SVG file
  • fantasy fonts screenshot
• Figure 10-1 (comparing fonts in the same file):
  • screenshot collage
  • See also the original files in Chapter 5
• Example 10-1 & Figure 10-2 (using web fonts and @font-face):
  • SVG file
  • screenshot
  • See also Chapter 11 for more variations on this example

Return to the main table of contents.