WebFonts в SVG

Красивые svg-надписи выполнены с применением внешнего шрифта. Такой способ отлично подходит для адаптируемого шаблона. Попробуйте в браузере поменять размеры окна, в котором отображается наш сайт и вы увидите преимущества такой надписи. Она будет масштабироваться. Вторая строка текста выписана по заданной кривой.

А теперь приведем код, отвечающий за надписи, которые вы видите выше:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="30 40 340 135"> <title>Шрифт для SVG</title> <style type="text/css"><![CDATA[ @font-face { font-family: "RieslingRegular"; src: url("riesling-webfont.eot"); src: local("Riesling Regular"), url("riesling-webfont.eot?#iefix") format("embedded-opentype"), url("riesling-webfont.woff") format("woff"), url("riesling-webfont.ttf") format("truetype"), url("riesling-webfont.svg#RieslingRegular") format("svg"); font-weight: normal; font-style: normal; } text { font-family: "RieslingRegular", serif; font-size: 40px; fill: silver; stroke: gray; stroke-width: 0.5px; text-anchor: middle; } textPath { font-size: 18px; text-anchor: start; fill: silver; stroke: none; } ]]></style> <text x="200" y="80">Шрифт для SVG!</text> <path id="curve" d="M75,170 C150,140 200,140 250,160" fill="none"/> <text x="120" y="80"><textPath xlink:href="#curve">отлично...</textPath></text> </svg>