<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <!-- to correct the unsightly Flash of Unstyled Content. http://www.bluerobot.com/web/css/fouc.asp -->
    <script type="text/javascript"></script>
    
    <style type="text/css" media="all">
        @font-face {
            font-family: 'SVGraffiti-First';
            /* URI doesn't have an fragment identifier - we should choose a first font. */
            src: url("resources/graffiti.svg") format(svg)
        }

        @font-face {
            font-family: 'SVGraffiti-Second';
            src: url("resources/graffiti-with-empty-first-font.svg#SVGraffiti") format(svg)
        }
        
        p.first { 
          font: 0.5cm "SVGraffiti-First";
        }

        p.second { 
          font: 0.5cm "SVGraffiti-Second";
        }
    </style>
</head>

<body>
<p class="first">This text should be rendered with a first font.</p>
<p class="second">This text should be rendered with a second font.</p>
</body>

</html>